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

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);

斯菲德尔

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