ChApter 8 ■ IntegrAtIng CSS3 AnImAtIon wIth reSponSIve weB DeSIgn AnD JAvASCrIpt
Listing 8-9. SVG File of Multiple Drawing Layers
div#shapes { background-image: url('bodyshapes.svg#mesomorph');
position: absolute; top: 0; right: 0; width: 145px; height: 355px; }
Using the same targeting technique, you can swap the visibility of the layers in the SVG file used in the
background image of the div (Listing 8-10).
Listing 8-10. SVG File of Multiple Drawing Layers
@media screen and (max-width: 1000px) {
div#shapes { background-image: url('bodyshapes.svg#ectomorph); }
}
Finally, it should be noted that SVG elements can be animated in and of themselves with the
element, The visibility of each layer can be animated with transitions if the SVG was inserted directly on the page,
rather than having been used as a background image.
Figure 8-7. Different named layers of an SVG vector drawing superimposed on each other
Each of the grouped SVG drawings is layered on top of one another, as shown in Figure 8-7. The layers are
then hidden with CSS. The next line in the embedded stylesheet turns on the visibility of a group if a URL targets
it. You can use CSS to place the SVG file as a background image in a div, as shown in Listing 8-9.