SVG＆Css：标记路径的标签未在IE中显示

Question

<svg:marker  id="markerSquare1" markerWidth="10" markerHeight="7" refX="4" refY="4"
orient="auto" markerUnits="strokeWidth" style="position: absolute; z-index: 5;">
  <svg:rect  x="1" y="1" width="45" height="45" [attr.fill]="node.options.color" style="position: absolute; z-index: 5;" />
<svg:text    id="markStart" x="1" y="5" font-family="Verdana" font-size="4" fill="red;" >{{label}}</svg:text>
</svg:marker>

 <svg:path
          class="line"
          stroke="#777"
          stroke-width="4"
          marker-start="url(#markerSquare1)"
        marker-end="url(#markerSquare)">
        </svg:path>

我的问题是互联网探索标记svg的标签未显示为下图，但是使用mozilla和chrome效果很好。

有了Internet Explorer，我就知道了

使用chrome和mozilla，我明白了

Answer 1

Internet Explorer无法正确显示带有markerUnit="strokeWidth"的标记。这是一个他们从未修复过的已知错误。它会导致比例尺错误，并将标记方式画得很大。

您看到的深色是正在绘制的大量文本。解决方法是使用markerUnit="userSpaceOnUse"。并使用用户空间单位（而不是相对于线宽）定义标记。

PS。 position和z-index是无效的SVG属性。他们在这里没有为您做任何事情。