SVGBasics

Line Markers with SVG

Line markers are simple shapes placed regularly along a path. This can be useful for giving directional arrows or marking distance at a set interval.

If markerUnits is not specified, it defaults to "strokeWidth" This means that 1 in a marker is equivalent to the strokeWidth of the graphic that the marker is applied to.

An arrow marker can be handy if you're trying to work with a fill rule the evenOdd rule is confusing.

You may think, like I did, that a marker would be a great user interface element to tie some scripting behaviour to. In my case I thought it would be a clever place to have a user click in order to move a vertex. Unfortunately, the specification explicitly states that "Event attributes and event listeners attached to the contents of a 'marker' element are not processed; only the rendering aspects of 'marker' elements are processed." To me, this doesn't leave a whole lot of good uses for markers outside the originally intended use as a generic arrowhead. I'd recommend their use when making a callout box but for anything interactive you're going to need a different element.

Marker Example

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg viewBox = "0 0 4000 2000" version = "1.1">
    <defs>
        <marker id = "StartMarker" viewBox = "0 0 12 12" refX = "12" refY = "6" markerWidth = "3" markerHeight = "3" stroke = "green" stroke-width = "2" fill = "none" orient = "auto">
            <circle cx = "6" cy = "6" r = "5"/>
        </marker>
        <marker id = "MidMarker" viewBox = "0 0 10 10" refX = "5" refY = "5" markerUnits = "strokeWidth" markerWidth = "3" markerHeight = "3" stroke = "lightblue" stroke-width = "2" fill = "none" orient = "auto">
            <path d = "M 0 0 L 10 10 M 0 10 L 10 0"/>
        </marker>
        <marker id = "EndMarker" viewBox = "0 0 10 10" refX = "5" refY = "5" markerUnits = "strokeWidth" markerWidth = "3" markerHeight = "3" stroke = "red" stroke-width = "2" fill = "none">
            <rect x = "0" y = "0" width = "10" height = "10"/>
        </marker>
    </defs>
    <path d = "M 200 250 L 700 100 L 900 350 L 1200 400 L 1300 200 L 1700 680 L 2200 680 L 2600 400" fill = "none" stroke = "black" stroke-width = "50" marker-start = "url(#StartMarker)" marker-mid = "url(#MidMarker)" marker-end = "url(#EndMarker)"/>
    <path d = "M 1000 750 S 2000 750 2500 1250 S 1200 1000 1300 1400 S 1700 1480 1900 1200" fill = "none" stroke = "tomato" stroke-width = "50" marker-start = "url(#StartMarker)" marker-mid = "url(#MidMarker)" marker-end = "url(#EndMarker)"/>
</svg>
©2004 Late Night PC Service | About Us | Site Map | Contact Us