如何在SVG/raphael的貝塞爾曲線的末端繪製箭頭？

我有此產生的曲線，：如何在SVG/raphael的貝塞爾曲線的末端繪製箭頭？

var path = ["M", x1.toFixed(3), y1.toFixed(3), "L", arrow_left_x, arrow_left_y, "L", arrow_right_x, arrow_right_y, "L", x1.toFixed(3), y1.toFixed(3), "C", x2, y2, x3, y3, x4.toFixed(3), y4.toFixed(3)].join(",");

enter image description here

，但我的箭不正確。
- 它只指向右側，並不指向與貝塞爾曲線末端的曲線斜率相同的方向。 - 它沒有填充

現在，我知道我沒有在這裏正確地做數學，但主要是，我只是想知道如何填補行結束的三角形。謝謝！

爲了演示：

 arrow_left_x = (x1 - 8); 
     arrow_left_y = (y1 - 8); 
     arrow_right_x = (x1 - 8); 
     arrow_right_y = (y1 + 8);

是用於獲取我用座標的代碼。

來源

2011-09-23 NullVoxPopuli

參見_ [我的SVG線箭頭的三角形（http://stackoverflow.com/questions/11808860/arrow-triangles-on-my-svg-line）_。 – Phrogz

現在Raphael 2.1有一個路徑attr對，這個'arrow-start'和'arrow-end'，見https://stackoverflow.com/questions/27372513/raphaeljs-how-to-draw-arrow-heads-at不能解決箭頭問題的角度的拱結構 – user568458

我想你應該爲你的目的使用標記。請參閱example here。

編輯：

您需要在defs節創建一個標記：

var defs = document.createElementNS('http://www.w3.org/2000/svg', 'defs'); 
var marker = document.createElementNS('http://www.w3.org/2000/svg', 'marker'); 
marker.setAttribute('id', 'Triangle'); 
marker.setAttribute('viewBox', '0 0 16 16'); 
marker.setAttribute('refX', '0'); 
marker.setAttribute('refY', '6'); 
marker.setAttribute('markerUnits', 'strokeWidth'); 
marker.setAttribute('markerWidth', '16'); 
marker.setAttribute('markerHeight', '12'); 
marker.setAttribute('orient', 'auto'); 
var path = document.createElementNS('http://www.w3.org/2000/svg', 'path'); 
marker.appendChild(path); 
path.setAttribute('d', 'M 0 0 L 16 8 L 0 16 z'); 
path.setAttribute('stroke', '#000'); 
path.setAttribute('stroke-width', '1'); 
path.setAttribute('style', ' marker-start :none; marker-end :none; ');  

document.getElementById(id_of_svg_placeholder).getElementsByTagName('svg')[0].appendChild(defs); 
defs.appendChild(marker);

和CSS referense它：

path {marker-start:url("#Triangle")}

或作爲一個屬性：

<path d="..." marker-start="url(#Triangle)" />

Here's the resulting jsfiddle

來源

2011-09-24 08:59:04

。 – NullVoxPopuli

你真的嘗試過嗎？ –

好吧，我現在看它是如何工作的。然而，它不會與拉斐爾競爭，因爲它使用標籤而不是屬性，如果您以某種方式編輯您的答案，我會將投票改爲upvote。或者如果你能弄清楚如何在這裏得到標記：http://jsfiddle.net/G5mTx/10/ wolud是真棒 – NullVoxPopuli

如何在SVG/raphael的貝塞爾曲線的末端繪製箭頭？

回答

相關問題