CSS翻译不工作在IE11上SVG g [英] CSS translate not working in IE11 on SVG g

问题描述

我想使用G标签移动一组svg元素，但它在IE中无法使用，即使是最新版本。它适用于所有其他浏览器。请帮助。

I want to move a group of svg elements using a G tag, but it isn't working in IE, even the latest version. It works in all other browsers. Please help.

我需要使用一些其他方式移动svg中的一组元素吗？

Do I need to use some other way of moving a group of elements in an svg?

http://jsfiddle.net/ahKpq/3/

<svg viewbox="0 0 20 20">
    <g>
        <circle cx=10 cy=10 r=10 />
    </g>
</svg>

g {
    transform: translate(10px, 0px);
    -ms-transform: translate(10px, 0px);
    -sand-transform: translate(10px, 0px);
    -webkit-transform: translate(10px, 0px);
}

推荐答案

IE11支持transform属性虽然它不能识别CSS样式。

IE11 supports the transform attribute even though it doesn't recognize the CSS style.

所以你可以简单地使用JavaScript设置属性以匹配样式：

So you can simply set the attribute to match the style using JavaScript:

var g= document.querySelector('g'),
    transform= getComputedStyle(g).getPropertyValue('transform');

g.setAttribute('transform', transform);

这篇关于CSS翻译不工作在IE11上SVG g的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！