使用SVG绘制带箭头的直线

<!DOCTYPE html>
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<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)"/>
</svg>
 
</body>
</html>

猜你喜欢

转载自blog.csdn.net/yu849893679/article/details/84067994
今日推荐