SVG marker-mid在路徑上的特定點上

Question

我得到了一些在畫布上生成pathes的代碼。 路徑對象看起來類似於：

<path class="link" d="M450,215.L265,236L225,236" style="stroke-width: 1;"></path>

在視圖上（a，b，c字母僅用於解釋問題）：

我的問題是我想在線條的中間，“a”到“b”之間繪制一些箭頭（標記），但是當我創建一個標記並執行marker-mid屬性時，它會在b點上生成。

我試圖在a和b之間做一些點，但是然后marker-mid在那里做了箭頭，並且在b點都做了。

來自WEB API文檔：

marker-mid定義箭頭或多標記，該箭頭或多標記應在除給定元素的第一個和最后一個頂點或基本形狀之外的每個頂點處繪制。

如何在b點禁用標記？ 或者我如何在ab之間制作像箭頭一樣的東西？ 謝謝 ！

Answer 1

有時在任何你喜歡的地方分割路徑並不容易。 然后，您可以使用startOffset路徑上的文本在路徑上的任何位置放置“箭頭”...

 path { fill: none; stroke: red; stroke-width: 3 } text { font-size: 35px; fill: red; dominant-baseline: central } 

 <svg viewBox="0 0 500 500" width="300px" height="300px"> <path class="link" id="path1" d="M0 0 L200 400A300 300 0 0 1 490 150"></path> <text > <textPath xlink:href="#path1" startOffset="10%">➤</textPath> <textPath xlink:href="#path1" startOffset="20%">➤</textPath> <textPath xlink:href="#path1" startOffset="30%">➤</textPath> <textPath xlink:href="#path1" startOffset="40%">➤</textPath> <textPath xlink:href="#path1" startOffset="50%">➤</textPath> <textPath xlink:href="#path1" startOffset="60%">➤</textPath> <textPath xlink:href="#path1" startOffset="70%">➤</textPath> <textPath xlink:href="#path1" startOffset="80%">➤</textPath> <textPath xlink:href="#path1" startOffset="90%">➤</textPath> </text> </svg> 

Answer 2

marker-mid定義箭頭或多標記，該箭頭或多標記應在除給定元素的第一個和最后一個頂點或基本形狀之外的每個頂點處繪制。

您正在繪制具有頂點A ， B和C ，因此根據定義，標記將在B繪制。

如果要在A和B之間繪制標記，則需要繪制從A到中點AB到B的path 。

 <svg width="200" height="150"> <defs> <marker id="markerArrow" markerWidth="13" markerHeight="13" refX="2" refY="6" orient="auto"> <path d="M2,2 L2,11 L10,6 L2,2" style="fill: #000;" /> </marker> </defs> <path d='M0,0 L50,50 L100, 100' style='marker-mid:url(#markerArrow); stroke: #000'/> <path d='M100,100 L125, 100 L150, 100' style='marker-mid:url(#markerArrow); stroke: #000' /> </svg>