Css 在Microsoft Edge中转换SVG中的元素不会'；行不通

出于某种原因，Microsoft Edge不允许您对SVG中的元素进行转换。填充可以很好地工作（因此我知道元素目标正在工作），但是转换被完全忽略。这在chrome上很好用，据我所知，在Edge上也应该很好用

HTML:

请参见此处的代码笔示例：

---

有什么想法吗？

截至2016年8月31日，Microsoft Edge不支持SVG元素上的CSS转换。但是，Edge团队正在考虑在未来发布此版本。考虑到其他浏览器的支持，列出了可能的工作。

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

内部SVG元素还不支持MSFT浏览器上基于CSS的转换。使用SVG转换。感谢您的快速响应-你们是在昨天刚刚添加的时候发现了这个bug，还是这是一个已知的问题？@DavidWolfand这个功能请求已经知道一段时间了，我希望他们支持它，它会破坏许多用户的web体验，如果edge的行为与大多数其他浏览器中常见的行为不匹配，那将是一件非常遗憾的事情。@Sampson您对此有何了解？当前的客户端站点很重，我们需要很快做出决定，是否应该在Edge中“支持设计”。我很想直接从来源得到一个词：）@Dejan.S Microsoft Edge在今年1月11日的Microsoft 10版本中增加了对这一点的支持。看，我是Edge团队的工程师；如果您有折扣，请通过提交。

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

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