SVG Does Not Adhere to the CSS Box Model
UnlikeHTML,SVGshapesarenotlimitedtorectanglesandboxes.Mostbox-model-
relatedpropertiesareinapplicabletoSVGelements.Youcan't,forinstance,change
thepaddingormarginofanSVGelement.Norcanyouusethebox-sizing,box-
shadow,outline,orborder-*properties.
Youcan,however,useCSStosetorchangearangeofSVGproperties.Thefulllist
isoutlinedintheSVGspecification.^2 We'lldiscussafewoftheminthischapter,
withinthecontextofspecifictechniques.
SVG Elements Cannot be Positioned
Althoughit'spossibletosettheXandYcoordinatesofanSVGelement,SVGdoes
nothavethesamemodelofpositioningasHTML.Avoidsettingthevalueofthe
CSSpositionpropertyasitwillhavenoeffect.Relatedtothis,SVGalsolacksthe
ideaofaz-indexandstackingcontexts.^3 SVGelementsarestackedaccordingto
theirsourceorder.Thosethatfalllaterinthedocumentsittowardsthetopofthe
stack.IfyouwanttoreorderSVGelements,you'llneedtomovethemaroundinthe
sourceorwithJavaScript.
Infact,mostCSS2.1propertiesdonotapplytoSVGdocuments.Exceptionsinclude
animationsandtransforms,font-*,display,overflow,visibility,andafewtext-
relatedproperties.Instead,you'llhavetouseSVG-specificstylingpropertieswith
SVGdocuments.^4
Styling an SVG Element
Here'sasimpleexampleofhowtostyleSVGelementsusingCSS.FirstourSVG
document.It'sastand-alonefile:
<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet href="s.css" type="text/css" ?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink=(^2) http://www.w3.org/TR/SVG/styling.html#SVGStylingProperties
(^3) TheSVG 2 specification[http://www.w3.org/TR/SVG2/render.html#ZIndexProperty]doesdefinebe-
haviorforz-indexandstackingcontextsinSVGdocuments,butthishasyettomakeitswayinto
browsers.
(^4) http://www.w3.org/TR/SVG/styling.html#SVGStylingProperties
Using CSS with SVG 311