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标准不支持的UPPERCASE。检查元素并查看属性是否为大写;如果是这样，那么它就是Edge中的一个已知问题。

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

2 个答案: