html - CSS 翻译在 SVG g 上的 IE11 中不起作用

Question

我想使用 <g> 移动一组 svg 元素标记，但它不能在 IE 中工作，即使是最新版本，尽管它可以在所有其他浏览器中工作。

我是否需要使用其他方式来移动 svg 中的一组元素？

svg {
  width: 20px;
  height: 20px;
}

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

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

Answer 1

IE11 支持 SVG 中的 transform 属性，即使它不识别 CSS 样式。

幸运的是，您可以使用 JavaScript 简单地设置属性以匹配样式:

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

svg {
  width: 20px;
  height: 20px;
}

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

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