Question

我是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>

Answer 1

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

奇怪的是，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>

有关此方法的说明

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

animateTransform在IE 11中不起作用

1 个答案: