Using SVG with CSS3 and HTML5

Chapter 13. Drawing the Lines

Chapter 13. Stroke Effects

Throughout the book, we have used the stroke property to draw outlines around a shape (or text). In this chapter, we will 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 fill shape, 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.

Different Strokes

In the simple case, a stroke is a continuous outline around the shape, drawn in a single color.

Except…even that isn’t always simple. The wider a stroke gets, the more you start to notice the details of how it is constructed.

A Simple Stroke to Start

There are three ...