如何在 IE 上缩放 SVG 的孩子答案

【问题标题】：How to scale SVG's children on IE如何在 IE 上缩放 SVG 的孩子
【发布时间】：2016-03-10 17:27:21
【问题描述】：

看看这个 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 的子标签（路径、多边形、矩形...）。

也许有人有想法？

【问题讨论】：

如果你想让它在 IE 上工作，你需要将转换指定为属性，而不是通过 CSS。

标签： css svg transform

【解决方案1】：

article（德语）指出 IE 无法处理 SVG 元素中后代的 CSS 选择器。还提到了here：svg.parent path.child { /* won't work! */ }

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

为polygon 本身分配一个类或 id 将使其可以直接选择，因此即使在 IE 中也是如此。

【讨论】：