css - 在 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;
}

请参阅此处的代码笔示例:http://codepen.io/dwolfand/pen/pEzQgy

有什么想法吗？

Answer 1

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