Chapter 13. Painting Lines
The gradient and pattern examples so far have nearly all used the
fill property to apply that paint to a shape. However, we mentioned early on in the book that paint servers can also be used for the
Applying paint servers to strokes introduces new complexities, which is why we have separated the topic into its own chapter. We cover the difficulties here, but also give some examples of unique effects you can create with painted strokes. And we include teasers about some new features proposed for SVG 2 that will make this easier.
Beyond the Edges
Strokes, as we’ve briefly mentioned, do not have to use solid colors. The
stroke property, like the
fill property, can use a
url() function to reference a paint server—a gradient or pattern—by its
id value. You can also include a fallback color in case there is a problem with that paint server, and—as you’ll soon see—those fallback colors do get used.
It is when using paint servers that you are most strongly reminded that the stroke is really a secondary shape, built upon the element that defines it, and not a line drawn with a pen or brush. Patterns and gradients currently cannot be painted along the path; similar to when painting the
fill of a shape, the stroke is cut out of wallpaper-like paint server content.
There are two main areas where designers tend to get frustrated when using paint servers for strokes:
objectBoundingBoxunits used by paint servers do not include the stroke region. ...