Menu
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

SVG <marker>


SVG Marker - <marker>

The <marker> element is used to create a marker for the start, mid, and end of a <line>, <path>, <polyline> or <polygon>.

All SVG markers are defined within a <defs> element. The <defs> element is short for "definitions", and contains definition of special elements (such as markers).

The marker is attached to the shapes using the marker-start, marker-mid, and marker-end attributes.

The <marker> element has six basic attributes to position and set the size of the marker:

Attribute Description
id The unique id for the marker
markerHeight The height of the marker. Default is 3
markerWidth The width of the marker. Default is 3
refX The x position where the marker connects with the vertex. Default is 0
refY The y position where the marker connects with the vertex. Default is 0
orient The orientation of the marker relative to the shape it is attached to. Can be "auto", "auto-start-reverse" or an angle. Default is 0

A Line with Start and End Marker

The following example creates a line with a circular start marker and an arrowhead end marker:

Sorry, your browser does not support inline SVG.

Here is the SVG code:

Example

<svg height="250" width="350" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <marker id="circle" markerWidth="8" markerHeight="8" refX="5" refY="5">
      <circle cx="5" cy="5" r="3" fill="black" />
    </marker>
    <marker id="arrow" markerWidth="10" markerHeight="10" refX="5" refY="5" orient="auto">
      <path d="M 0 0 L 10 5 L 0 10 z" fill="black" />
    </marker>
  </defs>
  <line x1="10" y1="10" x2="300" y2="200" stroke="red" stroke-width="3" marker-start="url(#circle)" marker-end="url(#arrow)" />
</svg>
Try it Yourself »

Code explanation:

  • The <defs> element contains two markers: one #circle marker and one #arrow marker
  • The shape of the marker is defined in the <marker> element
  • The first <marker> element contains a <circle> element that draws a small circle
  • The second <marker> element contains a <path> element that draws a small triangle
  • The <line> element references the two markers with the marker-start attribute and the marker-end attribute


Add a Mid Marker

The following example creates a polyline with a start marker, a mid marker and an end marker:

Sorry, your browser does not support inline SVG.

Here is the SVG code:

Example

<svg height="250" width="350" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <marker id="circle" markerWidth="8" markerHeight="8" refX="5" refY="5">
      <circle cx="5" cy="5" r="2" fill="black" />
    </marker>
    <marker id="arrow" markerWidth="10" markerHeight="10" refX="5" refY="5" orient="auto">
      <path d="M 0 0 L 10 5 L 0 10 z" fill="black" />
    </marker>
  </defs>
  <polyline points="15,40 15,170 200,170" stroke="red" stroke-width="3" fill="none" marker-start="url(#circle)" marker-mid="url(#circle)" marker-end="url(#arrow)" />
</svg>
Try it Yourself »

Code explanation:

  • The <defs> element contains two markers: one #circle marker and one #arrow marker
  • The shape of the marker is defined in the <marker> element
  • The first <marker> element contains a <circle> element that draws a small circle
  • The second <marker> element contains a <path> element that draws a small triangle
  • The <polyline> element references the two markers with the marker-start attribute, the marker-mid attribute and the marker-end attribute
  • Notice that the marker-start attribute and the marker-mid attribute points to the same marker (#circle). This way markers can be re-used multiple times

×

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail:
sales@w3schools.com

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail:
help@w3schools.com

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Copyright 1999-2024 by Refsnes Data. All Rights Reserved. W3Schools is Powered by W3.CSS.