SVG标记元素的使用

最新推荐文章于 2025-05-25 08:50:17 发布

AryaoO

最新推荐文章于 2025-05-25 08:50:17 发布

阅读量3.1k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端开发——D3 前端开发基础文章标签： marker defs orient refX svg

本文链接：https://blog.youkuaiyun.com/Selina_Chan/article/details/51647550

前端开发基础同时被 2 个专栏收录

46 篇文章

订阅专栏

前端开发——D3

33 篇文章

订阅专栏

举个栗子，展示一下使用格式：

  <defs>
            <marker id="mCircle" marker-width="10" markerHeight="10" refX="5" refY="5">
                <circle cx="5" cy="5" r="4" style="fill: none;stroke: black"/>
            </marker>
            <marker id="mArrow" markerwidth="4" markerHeight="8" refY="4" refX="6" orient="auto">
                <path d="M0 0 4 4 0 8" style="fill: none;stroke: black"/>
            </marker>
        </defs>
    <path d="M10 20 100 20 A20 30 0 0 1 120 50 L120 110" style="marker:url(#mCircle); marker-mid:url(#mArrow);fill:none;stroke: black "/>

注意：

①<marker>元素自身不会显示，需要放在<defs>元素中，因为它是存放复用元素的；

②refX、refY属性可以指定标记的坐标系统中与路径的开始对齐，使得图像标记显示在精确的位置上；

③将标记<marker>的orient属性设置为auto可以让标记自动旋转去匹配路径的方向；

④若路径的起点、中间、终点都用同一个标记，则只需使用marker属性即可，不需要指定marker-start、marker-mid、marker-end