SVG <marker> Marker

SVG tags are used for the start, middle, and end of label rows or paths. For example, a circular or square marker can be used at the start of a label path, and an arrow marker can be used at the end of a path. The marker element defines the arrow or multi-sided label graphic drawn on specific <path>, <line>, <polyline>, or <polygon> elements.

Marker Online Example

This is a simple visual example to show the appearance of markers:

Markers are created using the <marker> element. The <marker> element must be nested within a <defs> element. The <defs> element is typically used to reserve a set of reusable definitions for SVG images.
This is the SVG code for the above graphic example:

<svg width="500" height="100">
　　　　<defs>
　　　　　　　　<marker id="markerCircle" markerwidth="8" markerheight="8" refx="5" refy="5">
　　　　　　　　　　　　<circle　cx="5"　cy="5"　r="3" style="stroke: none; fill:#000000;"></circle>
　　　　　　　　</marker>
　　　　　　　　<marker id="markerArrow" markerwidth="13" markerheight="13" refx="2" refy="6" orient="auto">
　　　　　　　　　　　　<path d="M2,2　L2,11　L10,6　L2,2" style="fill: #000000;"></path>
　　　　　　　　</marker>
　　　　</defs>
　　　　<path d="M100,10　L150,10　L150,60" style="stroke: #"6666ff; stroke-width:　1px; fill: none;
　　　　　　　　　　　　　　　　　　　　　　　marker-start: url(#markerCircle);
　　　　　　　　　　　　　　　　　　　　　　　marker-end: url(#markerArrow);
　　　　　　　　　　　　　　　　　　　　　">/path>
</svg>

Please note that the <defs> element contains two <marker> elements. These two <marker> elements define the start and end markers shown in the image above.
Secondly, note how the <path> element uses mark-Start and Marker-The start and end CSS properties reference two <mark> elements from their style attributes. This is how you specify the marker to be used for a given path. I will talk more about this later.

Defining a Marker

You can use the <marker> element to define a marker. Here is an example:

<marker　id="markerCircle"　markerWidth="8" markerHeight="8" refX="5" refY="5">
　　　　<circle　cx="5"　cy="5"　r="3" style="stroke: none; fill:#000000;"/>
</marker>

This example defines a width of8(markerWidth="8") with a height of8(markerHeight="8) marker. Since markers are separate graphic elements, the width and height must be explicitly set.

The id attribute of the <mark> element is used to reference this marker from the <path> element.

The refX and refY coordinates set the point within the marker as the reference point. The reference point is the point used to locate the marker at the beginning of the path. In this example, refX and refY are set to the center of the circle, which means the center of the circle will be placed at the start of the path. If refX and refY are not set, they are assumed to be 0, which will make the top left corner of the marker located at the start of the path.

Inside the <marker> element is a <circle> element. The circle element is defined as a circle with5,5as the center (cx and cy). The center point is the center of the marker's virtual box. It is not the actual position placed on the image. The virtual box size within the <marker> element is set using markerWidth and markerHeight.8.8.

Automatic Orientation

This is another example of a <marker> definition. In this example, a triangle is defined as a path arrow.

<svg width="500" height="100">
　　　　<defs>
　　　　　　　　<marker id="markerSquare" markerWidth="7" markerHeight="7" refX="4" refY="4" orient="auto">
　　　　　　　　　　　　<rect x="1" y="1" width="5" height="5" style="stroke: none; fill:#000000;"></path>
　　　　　　　　</marker>
　　　　　　　　<marker id="markerArrow" markerWidth="13" markerHeight="13" refX="2" refY="7" orient="auto">
　　　　　　　　　　　　<path d="M2,2　L2,13　L8,7　L2,2" style="fill: #000000;" ></path>
　　　　　　　　</marker>
　　　　</defs>
　　　　<path d="M100,20 l0,50"
　　　　　　　　　　style="stroke: #0000cc; stroke-width:　1px; fill: none;
　　　　　　　　　　　　　　　　　　　　　　　marker-start: url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　　　marker-end: url(#markerArrow);
　　　　　　　　　　　　　　　　　　　　　　　marker-mid: url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　"
　　　　　　　　　　　　></path>
　　　　<path d="M140,20 l25,50"
　　　　　　　　　　style="stroke: #0000cc; stroke-width:　1px; fill: none;
　　　　　　　　　　　　　　　　　　　　　　　marker-start: url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　　　marker-end: url(#markerArrow);
　　　　　　　　　　　　　　　　　　　　　　　marker-mid: url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　"
　　　　　　　　　　　　></path>
　　　　<path d="M180,20 l50,50"
　　　　　　　　　　style="stroke: #0000cc; stroke-width:　1px; fill: none;
　　　　　　　　　　　　　　　　　　　　　　　marker-start: url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　　　marker-end: url(#markerArrow);
　　　　　　　　　　　　　　　　　　　　　　　marker-mid: url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　"
　　　　　　　　　　　　></path>
　　　　<path d="M220,20 l50,25"
　　　　　　　　　　style="stroke: #0000cc; stroke-width:　1px; fill: none;
　　　　　　　　　　　　　　　　　　　　　　　marker-start: url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　　　marker-end: url(#markerArrow);
　　　　　　　　　　　　　　　　　　　　　　　marker-mid: url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　"
　　　　　　　　　　　　></path>
　　　　<path d="M260,20 l50,0"
　　　　　　　　　　style="stroke: #0000cc; stroke-width:　1px; fill: none;
　　　　　　　　　　　　　　　　　　　　　　　marker-start: url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　　　marker-end: url(#markerArrow);
　　　　　　　　　　　　　　　　　　　　　　　marker-mid: url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　"
　　　　　　　　　　　　></path>
</svg>

The <path> element within the <marker> element will draw a triangle with a tip pointing to the right. However, if the path is not a horizontal line, the triangle needs to be rotated to fit the direction of the path it is used on. This can be done by setting the 'direction' (orient) attribute to 'auto'. It will rotate the shape within the <marker> element to fit the path it references.

The following image shows five lines with different slopes, all using the same two markers as the start and end markers. Note how the markers automatically rotate to adapt to the slope of the lines they are used on.

The running effect is as follows:

This is the result of setting the orient attribute of the <mark> element to auto.

The value of the orient attribute can also be set to a fixed degree (for example45This will cause the marker to rotate by that degree when used. However, this is far less useful than the automatic orientation feature.

Referencing markers from a path

You can use the following CSS properties to reference markers from a path:

• marker-start

• marker-mid

• marker-end

These three CSS properties assign the marker to the start, middle, and end of the path.

The CSS properties must be located in the style attribute of the <path> element they are used on. You can reference the <marker> element by referencing its id attribute, as shown below:

marker-start: url(#markerId);

markerId should be replaced with the value of the id attribute of the <mark> element to be referenced.

This is an example using all three CSS properties:

<svg width="500" height="100">
　　　　<defs>
　　　　　　　　<marker id="markerSquare" markerWidth="7" markerHeight="7" refX="4" refY="4" orient="auto">
　　　　　　　　　　　　<rect x="1" y="1" width="5" height="5" style="stroke: none; fill:#000000;"></path>
　　　　　　　　</marker>
　　　　　　　　<marker id="markerArrow" markerWidth="13" markerHeight="13" refX="2" refY="7" orient="auto">
　　　　　　　　　　　　<path d="M2,2　L2,13　L8,7　L2,2" style="fill: #000000;" ></path>
　　　　　　　　</marker>
　　　　</defs>
　　　　<path d="M100,20 l0,50"
　　　　　　　　　　style="stroke: #0000cc; stroke-width:　1px; fill: none;
　　　　　　　　　　　　　　　　　　　　　　　marker-start: url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　　　marker-end: url(#markerArrow);
　　　　　　　　　　　　　　　　　　　　　　　marker-mid: url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　"
　　　　　　　　　　　　></path>
　　　　<path d="M140,20 l25,50"
　　　　　　　　　　style="stroke: #0000cc; stroke-width:　1px; fill: none;
　　　　　　　　　　　　　　　　　　　　　　　marker-start: url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　　　marker-end: url(#markerArrow);
　　　　　　　　　　　　　　　　　　　　　　　marker-mid: url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　"
　　　　　　　　　　　　></path>
　　　　<path d="M180,20 l50,50"
　　　　　　　　　　style="stroke: #0000cc; stroke-width:　1px; fill: none;
　　　　　　　　　　　　　　　　　　　　　　　marker-start: url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　　　marker-end: url(#markerArrow);
　　　　　　　　　　　　　　　　　　　　　　　marker-mid: url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　"
　　　　　　　　　　　　></path>
　　　　<path d="M220,20 l50,25"
　　　　　　　　　　style="stroke: #0000cc; stroke-width:　1px; fill: none;
　　　　　　　　　　　　　　　　　　　　　　　marker-start: url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　　　marker-end: url(#markerArrow);
　　　　　　　　　　　　　　　　　　　　　　　marker-mid: url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　"
　　　　　　　　　　　　></path>
　　　　<path d="M260,20 l50,0"
　　　　　　　　　　style="stroke: #0000cc; stroke-width:　1px; fill: none;
　　　　　　　　　　　　　　　　　　　　　　　marker-start: url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　　　marker-end: url(#markerArrow);
　　　　　　　　　　　　　　　　　　　　　　　marker-mid: url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　"
　　　　　　　　　　　　></path>
</svg>

The running result is as follows:

Referencing markers from other shapes

The <path> element is not the only SVG element that can use markers. 　 <line>, <polyline>, and <polygon> elements can also use markers. They operate in the same way as the <path> element: through the marker start, marker middle, and marker end (respectively: marker-start, marker-mid and marker-The id attribute of the <marker> element is referenced in the end of the CSS property.

Marker units

The size of the marker can be set to scale to fit the stroke width of the path it is used on. Here is a visual example:

By setting the markerUnits of the <marker> element to strokeWidth, this effect can be achieved. This is actually the default value of this property, so even if you do not set the markerUnits attribute, this is the default behavior. This is how it looks in SVG code:

<marker id="markerSquare" markerWidth="7" markerHeight="7" refX="4" refY="4"
　　　　orient="auto" markerUnits="strokeWidth">
　　　　<rect x="1" y="1" width="5" height="5" style="stroke: none; fill:#000000;"/>
</marker>

To avoid automatic scaling markers to make them fit the path's stroke width, set the markerUnits attribute to userSpaceOnUse. This way, the marker will maintain its size regardless of the stroke width of the path it is used with.