CSS Master

➥"http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 497

➥ 184" enable-background="new 0 0 497 184" xml:space="preserve">

<polygon id="star" points="77,23.7 98.2,66.6 145.5,66.5 111.2,

➥106.9,119.3,154 77,131.8 34.7,154 42.8,106.9 8.5,67.5 55.8,

➥66.6 "/>

<circle id="circle" cx="245" cy="88.9" r="67.5"/>

</svg>

ThismarkupcreatestheimageshowninFigure8.3.

Figure 8.3. A star and a circle in SVG

Ashasbeenmentioned,wecannotusemostCSSpropertieswithSVGdocuments.

Butwecanchangeaspectssuchasanelement'scolor,solet'smakeourstaryellow:

#star {

fill: rgb(255,185,0);

}

You'lloftenseethefillattributeusedwithSVGtags(forexample,<circle

fill="#336699" cx="3" cy="10" r="100">),butit'salsoastylingpropertythat

canbeusedwithCSS.

Wecanalsoadjustanelement'sstroke,whichistheoutlineofanSVGshape.It

exists,evenifnostrokepropertiesareset.Let'sgiveourcirclea5pxdark-blue

dashedborder.We'llalsomakeitsfillthecolorofcornflowerblue:

circle {

fill: cornflowerblue;

stroke: darkblue;

stroke-width: 10;

312 CSS Master