上下文

我想要得到我正在創建的圖形中的節點路徑上的箭頭。因爲我使用的是貝塞爾曲線，所以分別使用路徑結束點/開始點的中心點更容易。SVG：如何修正Bezier彎曲路徑的偏心標記？

在所附的jsfiddle（下文），我們看到點，其中之一爲二次貝塞爾曲線的控制點的一個簡單的三角形。此外，端點標記已被抵消以與節點接觸，而不是部分地位於其後面;這是由於路徑被繪製到點的中心而不是邊緣。

美學有幾件事情不太同意此圖右：

箭頭頭尖比路徑
thiner雖然尖端正確角度的箭頭上貝塞爾曲線，路徑不在箭頭出現的位置。

這些美學缺陷的發生是因爲：

箭頭頭部的點是明顯thiner比路徑/路徑通過節點
箭頭頭部延伸是如此之大在相對於所述路徑的曲率，沒有令人滿意的解決方案，將箭頭頭部問題（給定當前代碼）

現在，人們可以通過製造緊張三次Bezier曲線作爲的jsfiddle的第二SVG做陪審團鑽機的第二個問題。

然而，在第三SVG看到，這不符合極端曲率擦出火花。

問題

有沒有用簡單的方式，以確保箭頭的點和路徑的位置的角度時，箭頭連接被居中;或者只是簡單地將箭頭縮小到足夠小而不會注意到的地方？

有沒有一種方法，使起始箭頭到最後看不見的路徑？ /或者一個簡單的方法來獲得路徑在擊中節點之前結束？

# code to meet SO requirements 
# look at this code

的jsfiddle

SVG Marker Demo

來源

2017-02-27 SumNeuron

爲特定應用程序，嘗試將視框的標記，使之小，因此它看起來有點與貝塞爾結束對齊。（SVG標記當前不與曲線對齊。）將refX更改爲將箭頭向前「滑動」一點直至行尾。例如

<marker id="arrow" viewBox="0 0 25 25" markerWidth="20" markerHeight="10" refX="20" refY="5" orient="auto" markerUnits="strokeWidth">

來源

2017-02-27 14:36:57

如何進行視圖框的工作。它適用於第一個，但另一個不太好。有沒有辦法讓標記最後呈現（這樣我可以將圖像分層爲路徑，節點，標記）？ – SumNeuron

SVG元素總是堆疊/呈現與創建時相同。即如果您想要上方的路徑/箭頭，則應先創建您的圈子。 –

其中一個主要問題是我正在使用'circle'的中心來製作'path's，然後將'circle'放在''path's之上以掩蓋'path's。我這樣做是因爲在我的應用程序中，我可能不一定知道'path'可能來自哪個方向，所以在'circle'不重要之前就搞清楚如何結束'path'。我可以通過向'refX'屬性添加半徑來將'marker'移回''path''，但是'path'比tip更寬。有沒有辦法解決這個問題？ – SumNeuron

爲什麼不只是使標記使用的座標系，而不是strokeWeight，用於：

<marker id="arrow" markerWidth="40" markerHeight="30" refX="25" refY="-5" 
        orient="auto" markerUnits="userSpaceOnUse" overflow="visible"> 
    <!-- path for the arrow head --> 
    <path d="M-18,10 l 6 -15 l -6 -15 l 40 15 l -40 15 Z" 
     fill="white" 
     stroke='black' 
     stroke-width='3' 
     opacity='1' /> 
</marker>

排序。如果我們繪製的路徑後的「點」，從而使箭頭頭上結果在上面：

來源

2017-03-01 20:17:41

我不知道這意味着什麼...此外，圖像不顯示:( – SumNeuron

你可以注意到'markerUnits =「userSpaceOnUse」' - 並且圖像加載得很好，除非你使用阻止它的瀏覽器擴展 –

當然，但這並不能解決我的兩個原始問題之一... – SumNeuron

SVG：如何修正Bezier彎曲路徑的偏心標記？

上下文

問題

的jsfiddle

回答

相關問題