SVG HTML

A Simple Path with Markers

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

MarkersSimplePath.svg

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <marker id="idCircleMarker" markerWidth="10" markerHeight="10"
      refX="5" refY="5">
      <circle cx="5" cy="5" r="4" fill="none" stroke="black" />
    </marker>
  </defs>
  <!-- A simple line segment -->
  <path d="M 25,25 L175,175"
    stroke="black" fill="none"
    marker-start="url(#idCircleMarker)"
    marker-end="url(#idCircleMarker)"
    />
</svg>
 

Output

 
 

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