Question

显然，IE10不支持SVG的CSS transform，只有属性转换（JSFIDDLE）：

<svg><rect id="myrect" width="200" height="200"></rect></svg>

setTimeout(function()
{
    var r = document.getElementById("myrect")

    //works in IE
    //r.setAttribute("transform","scale(1.5)")   

    //does not work in IE
    r.style.transform = r.style.WebkitTransform = "scale(1.5)"
},1000);

如果支持，我希望包括平滑过渡：

#myrect { transition: all 1s; }

我看到它的方式，平滑过渡需要CSS转换，而IE需要属性转换。

那么什么是最好的策略？测试IE，然后如果IE使用属性转换，否则使用CSS转换？

任何想法都非常感激！

Answer 1

您必须使用IE进行javascript动画，例如

var scale = 1;

function f()
    {
        var r = document.getElementById("myrect")

        //works in IE
        r.setAttribute("transform","scale(" + scale + ")")

        scale += 0.001;

setTimeout(f, 10);
    };

setTimeout(f, 10);

jsfiddle

这也适用于其他UA，但您可以使用SMIL或CSS转换。

动态转换SVG的强大解决方案

1 个答案: