How Do You Draw An Arrow At The End Of A Bezier Curve In Svg / Raphael?

I have a curve generated by this: 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.toFi

Solution 1:

I guess you should use markers for your purpose. See an example here.

Edit:

You need to create a marker in the defs section:

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);

and referense it in CSS:

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

or as an attribute:

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

Here's the resulting jsfiddle