SVG并没有提供原生的Arrow标签,这就需要自己的组合了,通过marker标签和path标签可以完美的模仿出箭头线,无论需要多少个箭头线,只需引用同一个marker即可:
<svg id="isvg" >
<defs>
<marker id="idArrow"
viewBox="0 0 20 20" refX="0" refY="10"
markerUnits="strokeWidth" markerWidth="3" markerHeight="10"
orient="auto">
<path d="M 0 0 L 20 10 L 0 20 z" fill="purple" stroke="black"/>
</marker>
</defs>
<path d="M 50 450 l 0 -350" stroke="blue" stroke-width="3" fill="none" d="M 50 450 H 700" marker-end="url(#idArrow)" />
<path stroke="purple" stroke-width="3" fill="none" d="M 50 450 H 700" marker-end="url(#idArrow)" />
</svg>