SVG <marker> 标记-在线运行代码案例-大卫编程网

当前位置: 首页 HTML/CSS SVG 教程 SVG 元素

<svg width="500" height="100">
    <defs>
        <marker id="markerSquare" markerWidth="7" markerHeight="7" refX="4" refY="4" orient="auto">
            <rect x="1" y="1" width="5" height="5" style="stroke: none; fill:#000000;"></path>
        </marker>

<marker id="markerArrow" markerWidth="13" markerHeight="13" refX="2" refY="7" orient="auto">
            <path d="M2,2 L2,13 L8,7 L2,2" style="fill: #000000;" ></path>
        </marker>
    </defs>

<path d="M100,20 l0,50"
          style="stroke: #0000cc; stroke-width: 1px; fill: none;
                       marker-start: url(#markerSquare);
                       marker-end: url(#markerArrow);
                       marker-mid: url(#markerSquare);
                     "
            ></path>

<path d="M140,20 l25,50"
          style="stroke: #0000cc; stroke-width: 1px; fill: none;
                       marker-start: url(#markerSquare);
                       marker-end: url(#markerArrow);
                       marker-mid: url(#markerSquare);
                     "
            ></path>

<path d="M180,20 l50,50"
          style="stroke: #0000cc; stroke-width: 1px; fill: none;
                       marker-start: url(#markerSquare);
                       marker-end: url(#markerArrow);
                       marker-mid: url(#markerSquare);
                     "
            ></path>

<path d="M220,20 l50,25"
          style="stroke: #0000cc; stroke-width: 1px; fill: none;
                       marker-start: url(#markerSquare);
                       marker-end: url(#markerArrow);
                       marker-mid: url(#markerSquare);
                     "
            ></path>

<path d="M260,20 l50,0"
          style="stroke: #0000cc; stroke-width: 1px; fill: none;
                       marker-start: url(#markerSquare);
                       marker-end: url(#markerArrow);
                       marker-mid: url(#markerSquare);
                     "
            ></path>

</svg>