javascript - 过渡在 IE10 中不起作用

Question

我正在使用以下代码为 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>

在 IE10 中实现这种动画有什么建议吗？

Answer 1

如果您没有将正确的文档类型声明作为文档的第一行，IE 将进入兼容模式并且大多数功能将无法按预期工作。确保你有一个有效的文档类型(!DOCTYPE html 会很好)并添加 meta http-equiv="X-UA-Compatible"content="IE=edge"到你的文档。