0 
<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 我明白了 在 IE 上

用chrome和mozilla我明白了 用chrome和mozilla我明白了

4

1 回答 1

1

Internet Explorer 无法markerUnit="strokeWidth"正确呈现标记。这是一个他们从未修复的已知错误。它得到了错误的比例并将标记画得很大。

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

PS。position并且z-index不是有效的 SVG 属性。他们在这里没有为你做任何事情。

于 2018-07-12T12:49:41.070 回答