Using SVG with CSS3 and HTML5

Chapter 14. Marking the Way

Chapter 14. Line Markers

This chapter examines line markers, symbols that can be used to accent the points of a custom shape.

Markers can be added to the start and end of every segment in a path (or line, polyline, or polygon), or only to the very beginning or end.

Markers have some similarity to line joins and line caps (which we discussed in Chapter 13). Line joins and line caps can change the appearance of the ends and corners of paths, but maybe not as much as you want. They can’t draw line-cap shapes other than circles or squares, and they can’t draw anything wider than the stroke itself. That means they can’t draw an arrowhead.

Arrowheads are the quintessential use of the <marker> element, but there are many other possibilities. Markers can be used to create custom line-join shapes, or to draw symbols on all the points in a line chart.

Markers offer a number of conveniences, compared to line joins, or compared to drawing each marker symbol individually as a <use> copy of a <symbol>. However, as defined in SVG 1.1, markers are still rather limited. Many things that you might expect to be able to do aren’t supported. There are also a number of bugs and inconsistencies that limit the use of markers to the simpler cases.

A few additional marker options are included in SVG 2, but many other advanced features were deferred to a separate SVG Markers module. At the time of writing, it’s not clear when further work might happen on those proposals.

Emphasizing ...