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

Question

显然，IE10 不支持SVGtransform的 CSS ations，只支持像这样的属性转换（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 转换来代替。