SVG 如何给线条末尾添加箭头

SVG中有个marker元素，可以在特定元素（path,line,polyline,polygon）上绘制箭头或多边形标记图形。 MDN上marker说明：marker

属性说明

属性	说明
id	用于其他元素引用。 `marker-start="url(id)"`：标记显示在元素的起点 `marker-mid="url(id)"`：显示在指定元素内部顶点上，并不是元素的中点 `marker-end="url(id)"`：显示在元素的终点
markerWidth	`marker`放入的视口的宽度，默认值3
markerHeight	`marker`放入的视口的高度，默认值3
refX	`marker`与元素连接点的`x`坐标
refY	`marker`与元素连接点的`y`坐标
markerUnits	定义`markerWidth`和`markerHeight`和`marker`的内容本身的坐标系统。 `strokeWidth`(默认值) ：marker大小会适应其连接的元素 `userSpaceOnUse`：使用当前用户坐标系统，不受其连接元素的影响
orient	定义marker相对图形的方向。默认值0 `auto`：根据线条的方向自动设置标记方向 `auto-start-reverse`：在起点时会自动反向 `<angle>`：指定角度，元素x轴与标记x轴之间的夹角。

效果演示

代码展示

<svg width="500" height="500">
    <defs>
        <marker id="triangle" markerUnits="strokeWidth" 
                markerHeight="6" markerWidth="6"
                viewBox="0 0 6 6" refX="1" refY="3" 
                orient="auto-start-reverse">
            <path d="M0,0L6,3L0,6z" fill="#17c1c5"></path>
        </marker>
        <marker id="arrow" markerUnits="strokeWidth" 
                markerHeight="6" markerWidth="6"
                viewBox="0 0 6 6" refX="3" refY="3" 
                orient="auto-start-reverse">
            <path d="M1,1L5,3L1,5L3,3z" fill="#17c1c5"></path>
        </marker>
        <linearGradient id="normal" x1="0" y1="0" x2="100%" y2="0">
            <stop offset="0%" stop-color="rgba(203,242,243,1)" />
            <stop offset="100%" stop-color="rgba(23,193,197,1)" />
        </linearGradient>
    </defs>
    <line x1="10" y1="10" x2="400" y2="40" stroke="url(#normal)" 
          stroke-width="2" marker-end="url(#triangle)"></line>
    <path d="M10,50 T20,160 T300,230 T250,300" fill="none" 
          stroke="url(#normal)" stroke-width="2" marker-start="url(#triangle)" 
          marker-end="url(#triangle)" marker-mid="url(#arrow)"></path>
</svg>

cloudtian / blogs

SVG 如何给线条末尾添加箭头 #36