<style type="text/css">
.st0{fill:#FF0000;}
.st1{fill:#92029E;}
.st2{fill:#007EFC;}
:not(:target) {
display: none;
}
</style>
<polygon id="star" class="st0" points="24.4,1.7 31.9,16.8 48.5,
➥19.2 36.5,30.9 39.3,47.4 24.4,39.6 9.6,47.4 12.4,30.9 0.4,19.2
➥ 17,16.8 "/>
<polygon id="hexagon" class="st1" points="48.9,31.4 31.6,49.2
➥ 7.6,43.1 0.8,19.2 18.1,1.4 42.2,7.5 "/>
<polygon id="triangle" class="st2" points="0.8,1.5 42.1,25.3 0.8
➥,49.2 "/>
</svg>Eachelementhasanidorfragmentidentifier.We'vealsoembeddedourCSSin
thisSVGdocument,andusedthe:not()pseudo-classincombinationwiththe
:targetpseudo-class.You'llrecallinChapter 2 that:targetappliesstylestoa
documentfragmentasindicatedbythedocument'sURL.Here,it'susedtohide
portionsofourSVGdocumentthatdonotmatchthetarget.
NowwecanlinkthisSVGfromourHTMLorCSS.Forexample,touseourstar
iconasabackgroundimage,wemightusethefollowing:
.star-bg {
background: url(../../images/svg-icons.svg#star);
background-size: 20px 20px;
}Andwe'llendupwitharesultsuchasthatseeninFigure8.6.
Using CSS with SVG 315