marker2.svg - mozsearch

Enable keyboard shortcuts

<svg width="400" height="400" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">

  <defs>

    <!-- Arrowhead marker definition -->

    <marker

      id="arrow"

      viewBox="0 0 10 10"

      refX="5"

      refY="5"

      markerWidth="6"

      markerHeight="6"

      orient="auto-start-reverse">

      <path d="M 0 0 L 10 5 L 0 10 z" />

    </marker>

    <!-- Dot marker definition -->

    <marker

      id="dot"

      viewBox="0 0 10 10"

      refX="5"

      refY="5"

      markerWidth="5"

      markerHeight="5">

      <circle cx="5" cy="5" r="5" fill="red" />

    </marker>

  </defs>

  <!-- Coordinate axes with an arrowhead in both directions -->

  <polyline

    points="10,10 10,90 90,90"

    fill="none"

    stroke="black"

    marker-start="url(#arrow)"

    marker-end="url(#arrow)" />

  <!-- Data line with polymarkers -->

  <polyline

    points="15,80 29,50 43,60 57,30 71,40 85,15"

    fill="none"

    stroke="grey"

    marker-start="url(#dot)"

    marker-mid="url(#dot)"

    marker-end="url(#dot)" />

</svg>