Scalable Vector Graphics - HTML5 with Visual Studio 2012 - page 192

Adding Styles
The default style for these elements is a solid black fill and because some of these shapes are on top of each other,
several are not currently visible. Notice that you assigned a class attribute to each element. Now you'll apply
styles for these elements using the class attribute. Add the code shown in Listing 9-1 inside the svg element, just
before the elements you added earlier.

Listing 9-1. Adding SVG styles

<style type="text/css" >
<![CDATA[
.body
{
fill: white;
stroke: gray;
stroke-width: 1px;
}

.hat
{
fill: black;
stroke: black;
stroke-width: 3px;
}

.button
{
fill: black;
}

.eye
{
fill: black;
}

.nose
{
fill: orange;
}

]]>
</style>

■ The style element needs to be inside the svg element and you can't use an external style sheet. Notice
the [CDATA[ tag around the style rules. This is necessary to prevent the XMl parser from treating this as part of the
HTMl document.

Note