This SVG example illustrates how to create a simple path with middle markers.
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- A circle marker -->
<marker id="idCircleMarker" markerWidth="10" markerHeight="10"
refX="5" refY="5">
<circle cx="5" cy="5" r="4" fill="none" stroke="black" />
</marker>
<!-- A square marker -->
<marker id="idSquareMarker" markerWidth="10" markerHeight="10"
refX="5" refY="5">
<rect x="0" y="0" width="10" height="10"
fill="none" stroke="black" />
</marker>
</defs>
<!-- A path of line segments -->
<path d="M 25,25 L175,175 L175,100 L100,25"
stroke="black" fill="none"
marker-start="url(#idCircleMarker)"
marker-mid="url(#idSquareMarker)"
marker-end="url(#idCircleMarker)"
/>
</svg>
© 20072025 XoaX.net LLC. All rights reserved.