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>
© 20072024 XoaX.net LLC. All rights reserved.