SVG Marker Element

SVG Marker Element

The <marker> element is used for putting re-usable graphical elements along the layout of a SVG shape. It's generally used to put arrowheads or polymarks on the finish of a markable element.

Markable Elements

The some SVG, Scalable Vector Graphics elements can be markable using the SVG <marker> Element. The element are use to implement design on the few elements Of SVG. The list of elements that can me markable listed below.

• <line>

The element is used to draw a line.

• <path>

The path element is used to draw any 2D shape in HTML5, it's known as the strongest drawing tool in SVG. With this tool one can draw from a single line to multiple number of complex objects.

• <polygon>

The element is used to draw polygon.

• <polyline>

The element is used to draw a polyline.

You can't make a difference marker on some other element other than the markable elements. The marker element is referred to with marker property.

Marker Properties

A marker is a graphical object that is painted at particular positions along any shape element.

Markers are attached to shapes using the marker-start, marker-mid, and marker-end properties.

• marker-start
• marker-mid
• marker-end
• marker-segment
• marker-pattern
• marker-position

The marker-start and marker-end properties can be utilized to put markers at the first and last vertex, and the marker-mid property can be utilized to put markers at each and every other vertex (beside the first and last). The marker-start and marker-end can be utilized for instance to add pointed stones to paths. Markers set utilizing these properties are known as vertex markers.

The marker-segment property can be utilized to put markers at the focal point of each path portion. These markers are known as portion markers.

The marker-pattern property can be utilized to characterize a standard rehashing example of markers to put along the length of the path. Markers set with marker-pattern are known as rehashing markers.

A kid 'marker' element with a 'position' attribute can be utilized to put a marker at a specific area along the path. Such markers are known as situated markers.

The patterns for a marker are characterized by a 'marker' element. The marker-start, marker-end, marker-mid, marker-postion and marker-pattern properties, together known as the marker properties, reference 'marker' elements.

Marker Syntax

<marker refX="" viewbox="" refY="" markerWidth="" markerHeight="" orient=""> </marker>

Marker Attributes

• viewBox - This attribute specifies a rectangle in user space that should be mapped to the bounds of the SVG viewport established by the given element, taking into account the preserveAspectRatio.
• refX - The refX attributes defines the x-axis reference point of the marker.
• refY - The refY attributes defines the x-axis reference point of the marker.
• markerUnits - The markerUnits attribute defines the coordinate system for the attributes markerWidth, markerHeight and the contents of the marker.
• markerWidth - The markerWidth attributes represent the x-axis size of the viewport into which the marker is to be fitted according to the viewBox.
• markerHeight - The markerHeight attributes represent the y-axis size of the viewport into which the marker is to be fitted according to the viewBox.
• orient - The orient attribute indicates how the marker is rotated. It accepts either a value of auto or auto-start-reverse.

Example Code

<svg viewBox="0, -50, 200, 200"> <!-- The red starting marker --> <defs> <marker id="myStartMarker" viewBox="0, 0, 20, 20" refX="1" refY="10" markerWidth="10" markerHeight="10" orient="auto"> <circle stroke="none" fill="red" cx="10" cy="10" r="10" /> </marker> </defs> <!-- The green central marker --> <defs> <marker id="myMidMarker" viewBox="0, 0, 15, 20" refX="1" refY="10" markerWidth="10" markerHeight="10" orient="auto"> <rect stroke="none" fill="green" x="0" y="0" width="15" height="20" /> </marker> </defs> <!-- The blue ending marker --> <defs> <marker id="myEndMarker" viewBox="0, 0, 15, 20" refX="1" refY="10" markerWidth="10" markerHeight="10" orient="auto"> <polygon stroke="none" fill="blue" points="0 0, 0 20, 15 10, 0 0" /> </marker> </defs> <!-- The marked arc --> <path stroke="green" stroke-width="2" fill="none" d="M 100 0 a -20 20 0 1 0 0 100" marker-start="url(#myStartMarker)" marker-mid="url(#myMidMarker)" marker-end="url(#myEndMarker)" /> </svg>

For Output

Output is not available for now in SVG Tutorial, so please copy code which you want to see the output & Try our CTLive HTML Editor

Conclusion

The SVG <marker> element Properties : Notice how the marker properties were used differently to position different markers on the arc.

Try applying markers on <line> <polyline> etc... to help broaden your knowledge on the subject matter!