Question

下面的JSFiddle是一个SVG绘图，其中2个棕色矩形<rect>相互隔开，并且有一个<g>组，其中有一个类class="group"，它应用了一个转换（旋转和译文）。

JSFiddle

参考Caniuse.com，它给出了主要浏览器的大部分支持率，它表明IE9 +支持SVG转换属性，它在知道问题上说：

IE 10及更低版本不支持SVG元素的CSS变换（尽管SVG变换属性确实有效）。

问题

尽管我的唯一来源是这个网站，但我知道我们是否弄清楚为什么IE Edge目前不支持转换属性（ 2015年12月）？

问题2

是否有其他方法可以应用IE（Edge），Chrome和Firefox支持的CSS转换？

注意

JSFiddle在Chrome和Firefox上成功测试过。只有IE在两个版本（5,7,8,9,10，Edge）中都未通过测试。

Answer 1

通过CSS，我认为它在IE或Edge中不受支持。

该属性正在运行，我已经测试过了，所以我认为我们必须改变实现方法。

<g class="group" transform ="translate(100, 100) rotate(90)">

手动执行，或者，如果已创建<g class="group">，则使用javascript或jquery将此属性附加到<g class="group">

<强>段

<svg width="500px" height="500px">
  <g class="group" transform ="translate(100, 100) rotate(90)">
    <rect width="100px" height="10px" fill="brown"></rect>
    <rect x="50px" y="50px" width="100px" height="10px" fill="brown"></rect>
  </g> 
</svg>

在IE Edge

1 个答案: