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

Question

显然，IE10 不支持 SVG 的 CSS 转换，仅支持像这样的属性转换 (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 转换。