在微软Edge浏览器中，无法转换SVG内部的元素

Question

由于某些原因，Microsoft Edge不允许您对SVG内部的元素进行变换。填充效果可以正常工作（因此我知道元素定位是有效的），但变换完全被忽略了。在Chrome中可以正常工作，据我所知，在Edge中也应该可以。

HTML：

<div class="test-container">
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 300 400" xmlSpace="preserve">
    <g id="Type">
      <g>
        <rect x="100" class="st1" id="rect1" width="100" height="100"/>
        <rect x="100" y="100" class="st1" id="rect2" width="100" height="100"/>
      </g>
    </g>
  </svg>
</div>

CSS：

.test-container {
  width: 100px;
}
#rect1 {
  fill: blue;
  transform: translate(50px);
}
#rect2 {
  fill: red;
}

请查看codepen示例： http://codepen.io/dwolfand/pen/pEzQgy 有什么想法吗？

- David Wolfand

---

内部SVG元素在微软浏览器上尚不支持基于CSS的变换。请改用SVG变换。 - Michael Mullany

Answer 1

截至2016年8月31日，Microsoft Edge不支持对SVG元素进行CSS变换。然而，Edge团队正在考虑在未来的发布版本中支持该功能。鉴于其他浏览器的支持，status.microsoftedge.com将此工作列为“可能”。

- Sampson

---

谢谢您的快速回复 - 您们是刚发现这个错误吗？因为它昨天才被添加，还是这是一个已知问题？ - David Wolfand

@DavidWolfand 这个功能请求已经有一段时间了。 - Sampson

我真的希望他们支持它，否则会破坏许多用户的网络体验。如果Edge的行为与大多数其他浏览器不一致，那将是一件遗憾的事情。 - CoderScissorhands

@Sampson，你有关于这个的任何进展吗？当前客户网站使用了大量SVG，我们需要尽快决定是否应该在Edge中“支持设计”。希望能直接从消息源头得到回复 :) - Dejan.S

@Dejan.S 今年1月11日的Microsoft 10版本中，Microsoft Edge已经支持了这一功能。请参见https://developer.microsoft.com/en-us/microsoft-edge/platform/status/supportcsstransformsonsvg/?q=svg。 - TylerH

Answer 2

这可能与我在D3.js库中遇到的问题有关。形状会被填充为黑色，因为Edge生成的属性属性（而其他浏览器不会）总是大写，而SVG标准不支持。检查元素并查看属性是否大写；如果是，则这是Edge中已知的问题。

- Mike Mannakee

---

我是Edge团队的一名工程师；如果您有任何缩减，请通过http://bugs.microsoftedge.com提交。 - Sampson