如何在IE上扩展SVG的孩子

Question

看看这个Jsfiddle：https://jsfiddle.net/wmn63d68/7/

HTML：

 <svg id="hexagone" x="0px" y="0px" width="400px" height="400px" viewBox="0 0 400 400" enable-background="new 0 0 400 400" xml:space="preserve">
  <polygon points="397.731,198.75 299.798,368.5 103.933,368.5 6,198.75 103.933,29 299.798,29 " />
</svg>

CSS：

  svg#hexagone polygon {
   transform-origin: 50% 50%;
   fill: transparent;
   stroke-width: 3;
   stroke: blue;
 }

 svg#hexagone polygon {
   transform: scale(0.5);
   -ms-transform: scale(0.5);
 }

正如您所看到的，该缩放在Chrome，FF上完美运行......但它不适用于IE（所有转换属性）。它只适用于像div或svg这样的标签，但不适用于svg的子节点（路径，多边形，矩形......）。

也许有人有想法？

Answer 1

这个article（德语）声明IE不能处理SVG元素中后代的CSS选择器。还提到here：svg.parent path.child { /* won't work! */ }

我在SO上发布了类似的question。

将一个类或ID分配给polygon本身会使其直接可选，因此即使在IE中也是如此。