animateTransform在IE 11中不起作用

我是svg动画的新手，下面是我在另一行上动画(上下移动)一行的代码。这在Mozilla和Chrome中非常有效，但在IE 11中不起作用。有人能帮我弥补我所缺的吗？

<!DOCTYPE html>
<html>
<head><title></title>
</head>
<body>
	<svg height="210" width="500">
	<line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" />
	<line x1="150" y1="150" x2="200" y2="200" style="stroke:rgb(0, 0, 153);stroke-width:2">
		<animateTransform attributeName="transform"
type="translate"
values="200 200;-150 -150;200 200"
begin="0s"
dur="5s"
repeatCount="indefinite"
/>
	</line>
	</svg>
	
</body>
</html>

IE和Edge似乎不支持SMIL或CSS转换；需要设置转换属性，以便对平移/位置、旋转/方向或偏斜等产生影响。

奇怪的是，javascript能够使用CSS计算应用的变换，包括使用关键帧或过渡效果的零件动画，即使它们没有在浏览器中渲染。考虑到这一点，您可以为您的行提供某种形式的标识符，使用css为其设置动画，然后每50ms(每秒约20帧)手动应用变换属性。

<svg height="210" width="500">
<line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2"></line>
<line id="line" x1="150" y1="150" x2="200" y2="200" style="stroke:rgb(0, 0, 153);stroke-width:2"></line>
</svg>
<style>
// Switch to CSS Animations
@-webkit-keyframes line-animate {
0% {
-webkit-transform: translate(200px, 200px);
transform: translate(200px, 200px);
}
50% {
-webkit-transform: translate(-150px, -150px);
transform: translate(-150px, -150px);
}
100% {
-webkit-transform: translate(200px, 200px);
transform: translate(200px, 200px);
}
}
@keyframes line-animate {
0% {
-webkit-transform: translate(200px, 200px);
transform: translate(200px, 200px);
}
50% {
-webkit-transform: translate(-150px, -150px);
transform: translate(-150px, -150px);
}
100% {
-webkit-transform: translate(200px, 200px);
transform: translate(200px, 200px);
}
}
#line {
-webkit-animation: line-animate 5s linear infinite;
animation: line-animate 5s linear infinite;
}
</style>
<script>
(function(){
var line = document.getElementById('line');
// Iterative function
line.animate = function() {
// Set the line transform attribute to match the calculated CSS transform value.
line.setAttribute('transform', getComputedStyle(line).getPropertyValue('transform'));
setTimeout(line.animate, 50);
};
line.animate();
})();
</script>

有关此方法的说明

正确读取CSS动画和转换的浏览器在设置转换属性时可能会导致复杂问题，因此最好也为IE添加一些浏览器检测。无论如何，当应用样式转换时，大多数浏览器都会忽略转换属性
如果要设置动画的SVG元素已经具有变换属性，则需要将所有点、距离和路径转换为变换后的值
对于使用加法的SMIL动画，需要重新计算变换值
可能需要对动画元素的数量设置限制，以防止浏览器性能出现问题，因为我预计getComputedStyle会相当耗费资源

相关内容

最新更新

热门标签：