如何使用svg画箭头svg是什么大家都很熟悉了，在这里就不展开讲了。这次给大家讲讲怎么画箭头 svg 在直线上画箭头

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第17天，点击查看活动详情。

svg是什么大家都很熟悉了，在这里就不展开讲了。这次给大家讲讲怎么画箭头

svg 在直线上画箭头

先画一个三角形，作为箭头的尖尖

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <path d='M3,3 L3,10 L8,6 L3,3' style='fill:green' />
</svg>

此时，我们可以得到一个三角形，像这样：

再将三角形放到直线上，形成一个箭头➡️

那我们怎么把它放到直线上呢？这时，我们要用到 marker 标签：

marker 标记可以放在直线，折线，多边形和路径的顶点。
这些元素可以使用marker属性的"marker-start"，"marker-mid"和"marker-end"

markerWidth —— 标记的宽度
markerHeight —— 标记的高度
refx —— 标记顶点连接的位置
refy —— 标记顶点连接的位置

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <marker id='markerArrow' markerHeight='10' markerWidth='10'>
        <path d='M3,3 L3,10 L8,6 L3,3' style='fill:green' />
    </marker>
    <line x1='20' y1='20' x2='100' y2='100' stroke='red' stroke-width='1'
        marker-start='url(#markerArrow)'
        marker-mid='url(#markerArrow)'
        marker-end='url(#markerArrow)'>
    </line>
</svg>

此时，我们可得到一个首尾有箭头的直线：

好像哪里不对？设置箭头方向属性 —— orient='auto'

但是很明显，这个箭头的方向很奇怪，此时，我们需要给 marker 标签加上一个属性 —— orient='auto'，此时，我们的箭头方向会跟随直线方向：

<marker id='markerArrow' markerHeight='10' markerWidth='10' orient='auto'>
    <path d='M3,3 L3,10 L8,6 L3,3' style='fill:green' />
</marker>

效果如下：

好像还是不对，设置 refx 属性

<marker id='markerArrow' markerHeight='10' markerWidth='10' orient='auto' refx='3'>
    <path d='M3,3 L3,10 L8,6 L3,3' style='fill:green' />
</marker>

我们可以看到，三角形对齐了线段的两端，效果如下：

好像还是不对，设置 refy 属性

<marker id='markerArrow' markerHeight='10' markerWidth='10' orient='auto' refx='3' refy='6' >
    <path d='M3,3 L3,10 L8,6 L3,3' style='fill:green' />
</marker>

我们可以看到，三角形移到了线段的中间位置，效果如下：

箭头好像少了一个？

但好像还是有哪里不对，我们设了三个位置的箭头，为什么中间位置没有呢？

那我们换个标签试试？

将 line 标签换成 path 标签试试呢？

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <marker id='markerArrow' markerHeight='10' markerWidth='10' refx='3' refy='6'>
        <path d='M3,3 L3,10 L8,6 L3,3' style='fill:green' />
    </marker>
    <path d='M10,10 50,50 100,100' stroke='red' stroke-width='2' fill='none'
        marker-start='url(#markerArrow)'
        marker-mid='url(#markerArrow)'
        marker-end='url(#markerArrow)'/>
</svg>

得到下图：

成了！那我想把箭头的位置移动一下呢？

可以借助 marker-mid 属性和path中间坐标，比如，我将 path 路径换成：

    <path d='M10,10 90,90 100,100' stroke='red' stroke-width='2' fill='none'
        marker-start='url(#markerArrow)'
        marker-mid='url(#markerArrow)'
        marker-end='url(#markerArrow)'/>

可见三角形位置不在中间了：

这就是使用svg画箭头的方法，很有趣，大家可以自己试一下。

如何使用svg画箭头