在 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 不支持 CSS 对 SVG 元素进行转换。然而，Edge 团队正在考虑将其用于未来的版本。考虑到对其他浏览器的支持，status.microsoftedge.com 将这项工作列为可能。

Answer 2

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

在 Microsoft Edge 中转换 SVG 内的元素不起作用

Transforming an element inside an SVG in Microsoft Edge Doesn't Work

css

svg

transform

microsoft-edge