apike.ca
apike.ca

SVG Markers (Defining)

By mbystedt on Feb 27, 2014, 5:22:24 PM

Markers need to be defined before you can add them to the start, end or joints of line-type elements in SVG. This is done by wrapping SVG shapes inside a marker in the defines section of your SVG document. The marker creates a view box where you draw these shapes. When referenced by a line-type shape with marker-start, marker-mid or marker-end, the other attributes of the marker tell the viewer how to place and orient the marker.

See: Using a Marker

<marker>
Attribute
Explanation
markerUnits
 'strokeWidth' or 'userSpaceOnUse'. If 'strokeWidth' is used then one unit equals one stroke width. Otherwise, the marker does not scale and uses the the same view units as the referencing element. (default 'strokeWidth')
refx
 The position where the marker connects with the vertex. (default 0)
refy
The position where the marker connects with the vertex. (default 0)
orient
'auto' or an angle to always show the marker at. 'auto' will compute an angle that makes the x-axis a tangent of the vertex. See below for which direction increasing x values face in. (default 0)
markerWidth
The width of the marker. (default 3)
markerHeight
The height of the marker. (default 3)
viewBox
The view box is the points "seen" in this SVG drawing area. 4 values separated by white space or commas. (min x, min y, width, height)
Presentation Attributes
All
Marker Attributes
<defs>
    <!-- Well positioned marker -->
    <marker id="myMarker1" viewBox="0 0 10 10" refX="1" refY="5" 
        markerUnits="strokeWidth" orient="auto"
        markerWidth="4" markerHeight="3">
        <polyline id="markerPoly1" points="0,0 10,5 0,10 1,5" fill="orange" />
    </marker>
    <!-- Poorly positioned marker -->
    <marker id="myMarker2" viewBox="0 0 10 10" refX="1" refY="5" 
        markerUnits="strokeWidth" orient="auto"
        markerWidth="4" markerHeight="3">
        <polyline id="markerPoly2" points="2,2 12,7 2,12 3,7" fill="green" />
    </marker>
</defs>
Code 1. The markers used in the positioning example below.

Auto Orientation

The effect of using 'auto' for the orient attribute means the x-axis of the marker is a tangent of the vertex. But, there are two angles one could rotate the marker to have a tangent x-axis with the vertex. In most cases, it will be rotated so that increasing x-axis values are in the direction of the end of the path or line. At the start of a unclosed path or the start of a line it will be rotated so increasing x-axis values are in the opposite direction or away from the end of the path or line. The result is that you can't use one marker with auto orientation to create a double-headed arrow.

Position

The next examples demonstrate how to position a marker. They illustrate the marker properties viewbox, refX and refY.

Example 2. Left: The marker on the left is properly positioned. The one on the right is offset. (Download)
Example 3. Right: A visual guide to a marker. This is the marker from the code example at the top of page. (Download)
Related Topics