Question

我做了这个例子。它使用CSS过渡，以便当SVG rect元素的宽度发生变化时，它们可以平滑地动画到新的宽度。它仅适用于Chrome（和Opera FWIW）。 IE和FF很可能很快就会支持这个吗？

注意：我没有尝试过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>

Answer 1

但你可以让它像这样工作......

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>

SVG元素的CSS过渡是否在地平线上？

1 个答案: