使用SVG绘制带箭头的线

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<defs>
<marker id="arrow" 
		markerUnits="strokeWidth" 
		markerWidth="12" 
		markerHeight="12" 
		viewBox="0 0 12 12" 
		refX="6" 
		refY="6" 
		orient="auto">
        <path d="M2,2 L10,6 L2,10 L6,6 L2,2" style="fill: #000000;" />
</marker>
</defs>

<line x1="0" y1="0" x2="200" y2="50"  stroke="red" stroke-width="2" marker-end="url(#arrow)"/>

<path d="M20,70 T80,100 T160,80 T200,90" fill="white" stroke="red" stroke-width="2" marker-start="url(#arrow)" marker-mid="url(#arrow)" marker-end="url(#arrow)"/>

</svg>

http://blog.csdn.net/zghnpdswyp/article/details/52981116