<marker>

Objective: Learn to create and use <marker>.

<marker>s are used to apply unique and custom marks the start end and middle of lines and paths. They are particularly useful in geometry and other formal line art. They take a little effort to get right in the first instance, but once you have a set of markers they can be reused over and over.

Markers are created in the <defs> ... </defs> and can be reused any number of times. Markers are applied with standard #url references.

There is a demonstration of <marker > being used on the apex.infogridpacific.com tutorial site about SVG Primitives.

21.1 Construction Attributes

Markers have the following specific attributes that can or must be used when defining a marker. They allow you to define the size and position of markers. A marker can be any SVG shape including lines, circles, polygons and lines.

markerUnits this can be set to userSpaceOnUse or StrokeWidth. These values are very important to understand for markers so we will look at them separately.

refX This defines the the X position from inside the marker that is used as the attachment point.

refY This defines the the Y position from inside the marker that is used as the attachment point.

markerWidth This sets the default width of the marker. The marker shape must be inside this width.

markerHeight This sets the default height of the marker. The marker shape must be inside this height.

orient the orientation of the marker with respect to it attachment point. You can use angle values such as 45deg.

21.2 Using Markers

To use a marker on a line or path these three attributes apply. Remember the ID the URL is referencing must be unique for every marker defined.

marker-start="url(#Marker-Start)" A marker is applied at the beginning of a line, polyline or path.

marker-mid="url(#Marker-Mid)" A marker is applied at a junction point in a polyline or path. Note it does not work on a simple line. You must define the center point.

marker-end="url(#Marker-End)" A marker is applied at the end of a line, polyline or path.

This following image is a polyline with a center point to enable the viewing of marker-mid.

21.3 Simple <marker> Definition Examples

This first simple dot marker is 8px wide and the point it joins the line is in the center. Notice it has markerUnits="strokeWidth". This means the markers increase in size to match the source line stroke-width. the four lines are are 1px, 2px, 3px and 4px. The marker increases in size with the stroke. This is also the default unit setting if you do not define markerUnits.

Note that we are only using marker-start="url(#Dot)" and marker-end="url(#Dot)". marker-mid="url(#Dot)" cannot be used with a simple line.

Because this marker is a circle and the alignment refX and refY points are in the center, the same marker can be used for start and end.

<!-- DOT MARKER -->    
<marker id="Dot"    
refX="4"    
refY="4"    
markerUnits="strokeWidth"    
markerWidth="8"    
markerHeight="8"    
orient="auto">    
<circle cx="4" cy="4" r="3" fill="black" />
</marker>
<line stroke="black" stroke-width="1" 
marker-end="url(#Dot)" marker-mid="url(#Dot)" marker-start="url(#Dot)" x1="20" x2="180" y1="30" y2="30"></line>
    <line stroke="black" stroke-width="2" marker-end="url(#Dot)" marker-start="url(#Dot)" x1="20" x2="180" y1="60" y2="60"></line>
    <line stroke="black" stroke-width="3" marker-end="url(#Dot)" marker-start="url(#Dot)" x1="220" x2="380" y1="30" y2="30"></line>
    <line stroke="black" stroke-width="4" marker-end="url(#Dot)" marker-start="url(#Dot)" x1="220" x2="380" y1="60" y2="60"></line>

In the following example the dot has markerUnits="userSpaceOnUse" applied. The markers do not change in size as the stroke gets larger.

<markerUnits> In summary

It is important to understand these two unit values clearly.

If markerUnits="strokeWidth" is set, markers will size expand in proportion with the parent line stroke width.

If markerUnits="userSpaceOnUse" is set, the marker units will remain at the size as defined in <marker>.

21.4 Some Marker Shapes

Orientation

The orient="auto" attribute can be very valuable to keep SVG code smaller. The values for this are:

orient="auto" This means the marker positive x-axis is point in the direction of the path at the point it is placed.

orient="auto-start-reverse" means the marker used with end is 180deg different from start.

orient="45deg" you can provide and angle that will rotate the marker

21.5 Exercises

Use the samples above to experiment with markers and their attribute values until you have memorized them all and are familiar with their correct use.

<!--1. Circle with 100px radius-->
<circle cx="200" cy="200" r="100" style="stroke:rgb(0, 0, 0); 
    stroke-width:4; fill:rgb(255, 255, 255);"></circle>
<!--2. Circles in each quadrant-->
<circle cx="100" cy="100" r="90" style="stroke:rgb(0, 0, 0); 
    stroke-width:4; fill:rgb(255, 255, 255);"></circle>
<circle cx="300" cy="100" r="90" style="stroke:rgb(0, 0, 0); 
    stroke-width:4; fill:rgb(255, 255, 255);"></circle>
<circle cx="100" cy="300" r="90" style="stroke:rgb(0, 0, 0); 
    stroke-width:4; fill:rgb(255, 255, 255);"></circle>
<circle cx="300" cy="300" r="90" style="stroke:rgb(0, 0, 0); 
    stroke-width:4; fill:rgb(255, 255, 255);"></circle>
<!--3. Concentric Circles-->
<circle cx="200" cy="200" r="200" style="stroke:rgb(0, 0, 0); 
    stroke-width:1; fill:none;"></circle>
<circle cx="200" cy="200" r="180" style="stroke:rgb(0, 0, 0); 
    stroke-width:2; fill:none;"></circle>
<circle cx="200" cy="200" r="160" style="stroke:rgb(0, 0, 0); 
    stroke-width:3; fill:none;"></circle>
<circle cx="200" cy="200" r="140" style="stroke:rgb(0, 0, 0); 
   stroke-width:4; fill:none;"></circle>
<circle cx="200" cy="200" r="120" style="stroke:rgb(0, 0, 0); 
    stroke-width:5; fill:none;"></circle>
<circle cx="200" cy="200" r="100" style="stroke:rgb(0, 0, 0); 
    stroke-width:6; fill:none;"></circle>
<!--4. Half circle left-side -->
<circle cx="0" cy="200" r="200" style="stroke:black; 
    stroke-width:4; fill:rgb(255, 255, 255);"></circle>