CSS Master

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0

➥ 200 200" enable-background="new 0 0 200 200">

<circle cx="101.3" cy="96.8" r="79.6" style="fill: #ff99ff" />

</svg>

Figure 8.2. Using the style attribute to add a fill color

There'sonedifferencebetweenusingCSSwithHTMLandusingitwithSVG:

propertynames.CSSpropertiesthatareavailabletoHTMLaregenerallyunavailable

toSVG,andviceversa.We'llcomebacktothispointlaterinthechapter.

Usingthestyleattributeisn'tthebestwaytouseCSS,ofcourse.Doingsolimits

thereusabilityofthosestyles.InsteadweshoulduseembeddedorlinkedCSS.

Embedding CSS in SVG Documents

AbetterapproachtousingCSSwithSVGistoembeditusingthestyleelement

asshown:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0

➥ 200 200" enable-background="new 0 0 200 200">

<style type="text/css">

<![CDATA[

circle {

fill: #0c0;

}

308 CSS Master