在 Microsoft 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

有什么想法吗？

Answer 1

自 2016 年 8 月 31 日起，Microsoft Edge 不支持对 SVG 元素进行 CSS 转换。然而，Edge 团队正在考虑将其用于未来的版本。鉴于其他浏览器的支持，status.microsoftedge.com 将这项工作列为可能。

Answer 2

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