Question

我有点困惑。我创建了一个带箭头的虚线：

    <svg width="995" height="100" viewBox="0 0 995 100" xmlns="http://www.w3.org/2000/svg">
<defs>
    <marker id="arrowLeft" markerWidth="25" markerHeight="25" refX="0" refY="10">
      <path fill="#662D91" d="M0 12.5l25-12.5v25z"/>
    </marker>
    <marker id="arrowRight" markerWidth="25" markerHeight="25" refX="0" refY="0">
      <path d="M0 25v-25l25 12.5-25 12.5z" fill="#662D91"/>
    </marker>
</defs>
<path d="M0 0h950" stroke="#662D91" stroke-width=".75" stroke-dasharray="5,2" fill="#000" marker-start="url(#arrowLeft)" marker-end="url(#arrowRight)"/>
<text class="arrow-labels" transform="translate(300 10)">ACTIONS</text>

但该线路的路径目前为0,0，我希望它从0,20开始。但是，如果我将上面的代码更改为M0,20，则整行都会消失。我在这里缺少什么？

我意识到我可以使用transform，但我很好奇为什么设置M坐标不起作用。

小提琴：

https://jsfiddle.net/smlombardi/xmxrqg04/#&togetherjs=UvcvSsGuaL

SVG路径，设置起点位置？

0 个答案: