过渡在IE10中不起作用

时间:2016-12-27 09:40:49

标签: javascript css internet-explorer svg

我正在使用以下代码来动画svg路径。这在chrome和firefox中运行良好。但是在IE中,缩放就会发生。过渡不起作用。请找我的代码



function transform() {
            var scale = "scale(2 2)";
            var path = document.getElementById("scale");
            //path.setAttribute('transform', scale);
            //path.style.transition = "all 2s";
            var style = document.createElement('style');
            style.type = "text/css";
            style.innerHTML = '.two{-webkit-transition: all 5s 0.5s;transition: all 5s 0.5s;} .grow{-webkit-transform: scale(2.0,2.0);}';
            document.body.appendChild(style);
            path.setAttribute('class', 'two grow');
        }

<button onclick="transform()">Scale</button>
    <svg width="900" height="600">
        <g transform="translate(110,110)">
            <path d="M0 -43.3 50 43.3 -50 43.3Z" fill=" yellow" stroke="blue" stroke-width="2"
                  id="scale" />
        </g>
    </svg>
&#13;
&#13;
&#13;

有任何建议在IE10中实现这种动画吗?

1 个答案:

答案 0 :(得分:-2)

如果您没有正确的doctype声明作为文档的第一行,IE将进入兼容模式,大多数功能将无法按预期工作。确保您拥有有效的doctype(!DOCTYPE html会没问题),并将meta http-equiv =“X-UA-Compatible”content =“IE = edge”添加到您的文档中。