Chapter 7 ■ IntegratIng CSS3 anImatIonS wIth SVg and FIlterSFinally, you can also accomplish this via your CSS, if the SVG file is embedded directly in your page
(Listing 7-10).
Listing 7-10. Modifying the Appearance of an Inline SVG Element with an Embedded Stylesheet
<!DOCTYPE html>
Note that this does not mean that you somehow magically have new stroke or fill properties for any HTML
element, much as you might wish it. These properties are very specifically applied to SVG content only.
You can also detect hover on SVG elements, and change the appearance of the SVG content in response
(Listing 7-11).
Listing 7-11. CSS Hover Detection on an SVG Element
polygon { fill: red; stroke: black; stroke-width: 9px; }
polygon:hover { fill: black; }
Note one small but significant advantage to using inline SVG for the button: the “hot spot” area for hover is
exactly the shape of the polygon. On a standard bitmap image, the area is always rectangular, no matter how the
shape of the image might appear.
This means that you can also transition these effects, as you can with any other element influenced by CSS.
To make the CSS clearer and more specific, I’ve added an id to the polygon element and addressed it that way in
my styles, as shown in Listing 7-12. (Note that I’ve also brought the polygon “in” a little from the edges, as stroke
is added to the outside of the shape, in the same way that CSS border is to HTML elements. Without this, the tips
of the stroke would be cut off by the edges of the SVG “canvas” as it extended beyond them).
Listing 7-12. CSS Transition on an SVG Element
<!DOCTYPE html>