svg画线上的箭头

最新推荐文章于 2025-10-24 16:43:33 发布

原创最新推荐文章于 2025-10-24 16:43:33 发布 · 3.1k 阅读

5 ·

CC 4.0 BY-SA版权

svg 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何在SVG中创建连接线上的箭头。主要通过定义marker元素来制作箭头，并利用marker-start, marker-mid, marker-end属性将箭头应用到线条两端或路径上。特别指出，marker-mid仅在特定条件下生效。" 133891742,19673459,深入理解Java反射：实例解析,"['Java', '开发语言', '反射']

有时候在项目中需要用到svg，需要画连接线与箭头，主要分两步，在此简单介绍一下：

1、使用marker定义一个箭头

2、使用marker-start，marker-mid，marker-end引用箭头即可。

注意：

marker-mid的解释是标记中间应在路径数据的第一个和最后一个顶点以外的每个顶点上呈现，其他的地方不生效（所以放在一个单纯的line中是不生效的，在line中可以使用path画一个，这里就不详细说了）。

<svg width="500" height="500" 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 L2,2" style="fill: #0f0;" />
            </marker>
        </defs>
        <!--此处的marker-mid无效-->
        <line x1='100' y1='10' x2='300' y2='50' stroke='red' stroke-width='2' marker-start='url(#arrow)'
            marker-mid='url(#arrow)' marker-end='url(#arrow)'>
        </line>

        <path d="M10,95 C25,15 105,10 125,95 C145,180 225,185 240,95" stroke="#f00" stroke-width="2" fill="none"
            marker-start="url(#arrow)" marker-mid="url(#arrow)" marker-end="url(#arrow)" />
    </svg>

效果：