Safari中带虚线的SVG虚线

Question

我想要带有不带虚线箭头的虚线，但是在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（闻起来像是hack）确实很完美，但是箭头的尖端并不尖锐：

如何最好地替代Safari的这种行为，并获得带有带尖头的非虚线箭头的虚线？我是否缺少某些东西，为什么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>