SVG HTML

A Simple Path with Middle Markers

This SVG example illustrates how to create a simple path with middle markers.

MarkersMiddleSimplePath.svg

<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>
 

Output

 
 

© 2007–2024 XoaX.net LLC. All rights reserved.