Using SVG with CSS3 and HTML5 — Supplementary Material

Example code and online extras for the O'Reilly Media book by Amelia Bellamy-Royds, Kurt Cagle, and Dudley Storey.

Chapter 13
Drawing the Lines: Stroke Effects

In this chapter, we explore the full possibilities of strokes.

At first glance, it may not seem that there are a lot of possibilities for a stroke. It’s just an outline, right?

It can be, but it doesn’t have to be. A stroke is really a secondary shape, built upon the element that defines it. When that stroke is only a single pixel wide, it is easy to figure out where those pixels should go. But as strokes get thicker, they create multiple options for how the stroke’s geometry should relate to the underlying shape’s geometry, at corners and at line ends.

You can also change up the geometry of the stroke more directly, by breaking it into a dash pattern. This can be used to create a number of patterns and effects, beyond simple dashed lines.

Once you have a stroke shape (dashed or otherwise), you need to decide how to color it in. Just like with the fillshape, you have a choice of a solid color, semitransparent color, or a complex paint server—gradients and patterns. The options are mostly the same as fill, but with a few extra complications.

Figures and Examples#

The file names link to the code view on GitHub. Beware: the linked screenshots are hi-resolution; some have very large file sizes.

View all files for this chapter on GitHub.

Figure 13-1. Thick and thin strokes on round and square shapes
Example 13-1. Stroking shapes with various styles (incorrectly titled “Using stroke properties to modify the appearance of a reused symbol” in initial printings of the book)
Figure 13-2. The same shape and text, with varying stroke options
Example 13-2. Using stroke properties to modify the appearance of a reused symbol and text
Figure 13-3. Strokes extending beyond the edge of a symbol with (default) hidden overflow
Figure 13-4. Strokes without line joins
Figure 13-5. Strokes with joined lines, in different stroke-linejoin styles
Figure 13-6. Shapes and text with mitered corners, at the default settings, and with stroke-miterlimit of 10
Example 13-3. Using stroke-linejoin options
Figure 13-7. An open path with various stroke options: stroke-linecap of butt (left), round (center), and square (right), with stroke-linejoin modifications in the bottom row
Example 13-4. Using stroke-linecap to create line endings that match line joins
Figure 13-8. An open path with a 180° line join in the middle, and the same stroke-linecap and stroke-linejoin options as Figure 13-7
Figure 13-9. The 180° turns (circled) between curves in an icon
Figure 13-10. Zooming in on a 1px-stroke icon, with anti-aliasing (left) and without (right)
Figure 13-11. Shapes and text with various stroke options, when strokes are painted before fill
Figure 13-12. A 20×20 icon, drawn at various scales, with or without vector-effect: non-scaling-stroke
Example 13-5. Using non-scaling-stroke on icons reused at various scales
Unlabelled stroke dashing examples
Figure 13-13. Dashed lines with different dash patterns, and (bottom) the same patterns on wider strokes
Figure 13-14. Dashed lines on shapes with smooth curves and sharp corners
Example 13-6. Creating dashed lines on curved shapes
Figure 13-15. Dotted lines created with stroke-linecap
Figure 13-16. Dotted lines after the dash pattern is adjusted with pathLength
Figure 13-17. Geometric patterns created with offset dashes
Example 13-7. Using stroke-dashoffset to control which parts of a shape are stroked
Figure 13-18. Chain-link strokes, which could be animated
Example 13-8. Animating dashes with stroke-dashoffset
Figure 13-X1. Various stages of an animation to draw and then fill in shapes
Example 13-X1. “Drawing” a shape by animating a dash pattern
Figure 13-19. A repeating radial gradient applied to the stroke of a path (left) and the fill of a circle (right)
Figure 13-20. A repeating radial gradient applied to the stroke of one rectangle (left) and fill of another (right)
Figure 13-21. A photographic pattern tile that exactly fills the bounding box, applied to a stroked shape (left), versus the same size shape, filled (right)
Figure 13-22. A photographic pattern tile that is sized to cover an element including its stroke

Online Extras#