Safari 中带 non-dashed 标记的 SVG 虚线

Question

我想要一条带 non-dashed 箭头的虚线，但在 Safari 中，虚线显然也应用在标记上。

演示：

<svg width="100%" height="100%">

  <defs>

    <marker style="overflow:visible" id="myMarker" refX="0.0" refY="0.0" orient="auto">
      <path transform="scale(-0.4) translate(-3,0)" style="fill-rule:evenodd;fill:#ffffff;stroke:#000000;stroke-width:1pt;stroke-opacity:1" d="M 5.77,0.0 L -2.88,5.0 L -2.88,-5.0 L 5.77,0.0 z "></path>
    </marker>

  </defs>

  <line class="line" stroke-dasharray="5,5" x1="20" y1="20" x2="80" y2="80" marker-start="url(#myMarker)" stroke-width="10" stroke="black"></line>

</svg>

它在 Firefox（和 Chrome）中的样子，这就是我想要的样子：

在 Safari（12.0 和当前技术预览）中的外观：

将 stroke-dasharray 设置为 0 或将标记的 <path> 设置为空字符串似乎根本没有任何效果。将其设置为 1 0（闻起来像黑客）几乎完美，但箭头的尖端并不尖：

如何最好地覆盖 Safari 的这种行为并获得带有 non-dashed 箭头的虚线和尖头？为什么 Safari 会这样，或者这只是一个错误？我是否遗漏了什么？

Answer 1

我重写了标记的路径。现在它从边的中间而不是顶点开始。我还使用 stroke-dasharray="30,0"，其中 30 是标记路径的长度。

<svg width="100%" height="100%">

  <defs>

    <marker style="overflow:visible" id="myMarker" refX="0.0" refY="0.0" orient="auto">
      <path transform="scale(-0.4) translate(-3,0)" style="fill-rule:evenodd;fill:#ffffff;stroke:#000000;stroke-width:1pt;stroke-opacity:1" d="M-2.88,0L-2.88,5L 5.77,0L -2.88,-5L-2.88,0z" stroke-dasharray="30,0"></path>
    </marker>

  </defs>

  <line class="line" stroke-dasharray="5,5" x1="20" y1="20" x2="80" y2="80" marker-start="url(#myMarker)" stroke-width="10" stroke="black"></line>
  


</svg>

Safari 中带 non-dashed 标记的 SVG 虚线

Dashed SVG line with non-dashed marker in Safari

safari

svg

webkit

cross-browser