地平線上のSVG要素のCSSトランジションですか？

私はこの例を作りました。 SVG rect要素の幅が変更されると、新しい幅にスムーズにアニメートされるように、CSSトランジションを使用します。これはChrome（およびOpera FWIW）でのみ動作します。 IEとFFはすぐにいつでもこれをサポートする予定ですか？地平線上のSVG要素のCSSトランジションですか？

NB：私はEdgeを試していません。

<html> 
<body> 

<style> 
    rect { 
     transition: width ease-in-out .5s; 
    } 
</style> 

<svg width="900" height="500" style="border: 1px solid #000"> 
    <rect id="myRect1" x="0" y="0" width="0" height="100" fill="red"></rect> 
    <rect id="myRect2" x="0" y="100" width="0" height="100" fill="green"></rect> 
    <rect id="myRect3" x="0" y="200" width="0" height="100" fill="yellow"></rect> 
    <rect id="myRect4" x="0" y="300" width="0" height="100" fill="pink"></rect> 
    <rect id="myRect5" x="0" y="400" width="0" height="100" fill="#ddd"></rect> 
</svg> 

<script> 
    setTimeout(function(){document.getElementById('myRect1').setAttribute('width', '500px');}, 0); 
    setTimeout(function(){document.getElementById('myRect2').setAttribute('width', '500px');}, 200); 
    setTimeout(function(){document.getElementById('myRect3').setAttribute('width', '500px');}, 400); 
    setTimeout(function(){document.getElementById('myRect4').setAttribute('width', '500px');}, 600); 
    setTimeout(function(){document.getElementById('myRect5').setAttribute('width', '500px');}, 800); 
</script> 

</body> 
</html>

出典

2017-01-23 Richard

を得ることができます。いつかはい。 –

Shucks ... :-(。 – Richard

Edgeでの検討中https://developer.microsoft.com/en-us/microsoft-edge/platform/status/svg2/ – Ruskin

しかし、あなたはありません、すぐにそれのように働いて...

setTimeout(function(){document.getElementById('myRect1').setAttribute('width', '500');}, 0); 
 
setTimeout(function(){document.getElementById('myRect2').setAttribute('width', '500');}, 200); 
 
setTimeout(function(){document.getElementById('myRect3').setAttribute('width', '500');}, 400); 
 
setTimeout(function(){document.getElementById('myRect4').setAttribute('width', '500');}, 600); 
 
setTimeout(function(){document.getElementById('myRect5').setAttribute('width', '500');}, 800);

svg { 
 
    display: block; 
 
    transition: width ease-in-out .5s; 
 
}

<svg id="myRect1" width="0" height="100"> 
 
    <rect x="0" y="0" width="900" height="100" fill="red"/> 
 
</svg> 
 
<svg id="myRect2" width="0" height="100"> 
 
    <rect x="0" y="0" width="900" height="100" fill="green"/> 
 
</svg> 
 
<svg id="myRect3" width="0" height="100"> 
 
    <rect x="0" y="0" width="900" height="100" fill="yellow"/> 
 
</svg> 
 
<svg id="myRect4" width="0" height="100"> 
 
    <rect x="0" y="0" width="900" height="100" fill="pink"/> 
 
</svg> 
 
<svg id="myRect5" width="0" height="100"> 
 
    <rect x="0" y="0" width="900" height="100" fill="#ddd"/> 
 
</svg>

出典

2017-01-24 12:57:10 Ruskin

地平線上のSVG要素のCSSトランジションですか？

答えて

関連する問題