SVG标记元素的使用

举个栗子,展示一下使用格式:

  <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

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页