SVG and CSS
This page illustrates the application of CSS to the specialized language for creating graphics:SVG.
Below you'll create a demonstration that runs in a browser.
Note:Elements referenced by<use> elements inherit the styles from that element. So to apply different styles to them you should useCSS custom properties.
Example
Make a new SVG document as a plain text file,doc8.svg. Copy and paste the content from here, making sure that you scroll to get all of it:
html
<svg width="600px" height="600px" viewBox="-300 -300 600 600" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet" href="style8.css" type="text/css" /> <title>SVG demonstration</title> <desc>Mozilla CSS Getting Started - SVG demonstration</desc> <defs> <radialGradient cx="0" cy="0" r="200" gradientUnits="userSpaceOnUse"> <stop offset="33%" /> <stop offset="95%" /> </radialGradient> </defs> <text x="-280" y="-270">SVG demonstration</text> <text x="-280" y="-250"> Move your mouse pointer over the flower. </text> <g> <circle cx="0" cy="0" r="200" stroke="none" fill="url(#fade)" /> <g> <g> <g> <path d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path d="M0,-200 a40,40 0 0,0 -62,10" /> </g> <g transform="rotate(18)"> <path d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path d="M0,-200 a40,40 0 0,0 -62,10" /> </g> <g transform="rotate(36)"> <path d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path d="M0,-200 a40,40 0 0,0 -62,10" /> </g> <g transform="rotate(54)"> <path d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path d="M0,-200 a40,40 0 0,0 -62,10" /> </g> <g transform="rotate(72)"> <path d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path d="M0,-200 a40,40 0 0,0 -62,10" /> </g> </g> <g> <g transform="rotate(90)"> <path d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path d="M0,-200 a40,40 0 0,0 -62,10" /> </g> <g transform="rotate(108)"> <path d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path d="M0,-200 a40,40 0 0,0 -62,10" /> </g> <g transform="rotate(126)"> <path d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path d="M0,-200 a40,40 0 0,0 -62,10" /> </g> <g transform="rotate(144)"> <path d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path d="M0,-200 a40,40 0 0,0 -62,10" /> </g> <g transform="rotate(162)"> <path d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path d="M0,-200 a40,40 0 0,0 -62,10" /> </g> </g> <g> <g transform="rotate(180)"> <path d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path d="M0,-200 a40,40 0 0,0 -62,10" /> </g> <g transform="rotate(198)"> <path d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path d="M0,-200 a40,40 0 0,0 -62,10" /> </g> <g transform="rotate(216)"> <path d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path d="M0,-200 a40,40 0 0,0 -62,10" /> </g> <g transform="rotate(234)"> <path d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path d="M0,-200 a40,40 0 0,0 -62,10" /> </g> <g transform="rotate(252)"> <path d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path d="M0,-200 a40,40 0 0,0 -62,10" /> </g> </g> <g> <g transform="rotate(270)"> <path d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path d="M0,-200 a40,40 0 0,0 -62,10" /> </g> <g transform="rotate(288)"> <path d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path d="M0,-200 a40,40 0 0,0 -62,10" /> </g> <g transform="rotate(306)"> <path d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path d="M0,-200 a40,40 0 0,0 -62,10" /> </g> <g transform="rotate(324)"> <path d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path d="M0,-200 a40,40 0 0,0 -62,10" /> </g> <g transform="rotate(342)"> <path d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path d="M0,-200 a40,40 0 0,0 -62,10" /> </g> </g> </g> <g transform="rotate(9) scale(0.33)"> <g> <g> <path d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path d="M0,-200 a40,40 0 0,0 -62,10" /> </g> <g transform="rotate(18)"> <path d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path d="M0,-200 a40,40 0 0,0 -62,10" /> </g> <g transform="rotate(36)"> <path d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path d="M0,-200 a40,40 0 0,0 -62,10" /> </g> <g transform="rotate(54)"> <path d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path d="M0,-200 a40,40 0 0,0 -62,10" /> </g> <g transform="rotate(72)"> <path d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path d="M0,-200 a40,40 0 0,0 -62,10" /> </g> </g> <g> <g transform="rotate(90)"> <path d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path d="M0,-200 a40,40 0 0,0 -62,10" /> </g> <g transform="rotate(108)"> <path d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path d="M0,-200 a40,40 0 0,0 -62,10" /> </g> <g transform="rotate(126)"> <path d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path d="M0,-200 a40,40 0 0,0 -62,10" /> </g> <g transform="rotate(144)"> <path d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path d="M0,-200 a40,40 0 0,0 -62,10" /> </g> <g transform="rotate(162)"> <path d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path d="M0,-200 a40,40 0 0,0 -62,10" /> </g> </g> <g> <g transform="rotate(180)"> <path d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path d="M0,-200 a40,40 0 0,0 -62,10" /> </g> <g transform="rotate(198)"> <path d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path d="M0,-200 a40,40 0 0,0 -62,10" /> </g> <g transform="rotate(216)"> <path d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path d="M0,-200 a40,40 0 0,0 -62,10" /> </g> <g transform="rotate(234)"> <path d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path d="M0,-200 a40,40 0 0,0 -62,10" /> </g> <g transform="rotate(252)"> <path d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path d="M0,-200 a40,40 0 0,0 -62,10" /> </g> </g> <g> <g transform="rotate(270)"> <path d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path d="M0,-200 a40,40 0 0,0 -62,10" /> </g> <g transform="rotate(288)"> <path d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path d="M0,-200 a40,40 0 0,0 -62,10" /> </g> <g transform="rotate(306)"> <path d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path d="M0,-200 a40,40 0 0,0 -62,10" /> </g> <g transform="rotate(324)"> <path d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path d="M0,-200 a40,40 0 0,0 -62,10" /> </g> <g transform="rotate(342)"> <path d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path d="M0,-200 a40,40 0 0,0 -62,10" /> </g> </g> </g> </g></svg>Make a new CSS file,style8.css in the same directory asdoc8.svg. Copy and paste the content from here, making sure that you scroll to get all of it:
css
/*** SVG demonstration ***//* page */svg { background-color: beige;}#heading { font-size: 24px; font-weight: bold;}#caption { font-size: 12px;}/* flower */#flower:hover { cursor: crosshair;}/* gradient */#fade-stop-1 { stop-color: blue;}#fade-stop-2 { stop-color: white;}/* petals */.segment-fill { fill: var(--segment-fill-fill); stroke: var(--segment-fill-stroke); stroke-width: var(--segment-fill-stroke-width);}.segment-fill:hover { fill: var(--segment-fill-fill-hover); stroke: var(--segment-fill-stroke-hover);}.segment-edge { fill: var(--segment-edge-fill); stroke: var(--segment-edge-stroke); stroke-width: var(--segment-edge-stroke-width);}.segment-edge:hover { stroke: var(--segment-edge-stroke-hover);}/* outer petals */#outer-petals { opacity: 0.75; --segment-fill-fill: azure; --segment-fill-stroke: lightsteelblue; --segment-fill-stroke-width: 1; --segment-edge-fill: none; --segment-edge-stroke: deepskyblue; --segment-edge-stroke-width: 3; --segment-fill-fill-hover: plum; --segment-fill-stroke-hover: none; --segment-edge-stroke-hover: slateblue;}/* Non-standard way of styling elements referenced via <use> elements, supported by some older browsers*/#outer-petals .segment-fill { fill: azure; stroke: lightsteelblue; stroke-width: 1;}#outer-petals .segment-edge { fill: none; stroke: deepskyblue; stroke-width: 3;}#outer-petals .segment:hover > .segment-fill { fill: plum; stroke: none;}#outer-petals .segment:hover > .segment-edge { stroke: slateblue;}/* inner petals */#inner-petals { --segment-fill-fill: yellow; --segment-fill-stroke: yellow; --segment-fill-stroke-width: 1; --segment-edge-fill: none; --segment-edge-stroke: yellowgreen; --segment-edge-stroke-width: 9; --segment-fill-fill-hover: darkseagreen; --segment-fill-stroke-hover: none; --segment-edge-stroke-hover: green;}/* Non-standard way of styling elements referenced via <use> elements, supported by some older browsers*/#inner-petals .segment-fill { fill: yellow; stroke: yellow; stroke-width: 1;}#inner-petals .segment-edge { fill: none; stroke: yellowgreen; stroke-width: 9;}#inner-petals .segment:hover > .segment-fill { fill: darkseagreen; stroke: none;}#inner-petals .segment:hover > .segment-edge { stroke: green;}Open thedoc8.svg document in your SVG-enabled browser. Move your mouse pointer over the graphic to see what happens.
Result
Notes about this demonstration:
The SVG document links the stylesheet using the following HTML
<link>tag:html<link rel="stylesheet" href="style8.css" type="text/css" />It can also be linked with the
@importrule inside a<style>tag:html<style> @import url(style8.css);</style>SVG has its own CSS properties and values. Some of them are similar to CSS properties for HTML.
Challenge
Change the stylesheet so that the inner petals all turn pink when the mouse pointer is over any one of them, without changing the way the outer petals work.
Simplified structure
The SVG structure shown above could be written much more concise by referencing the individual parts of the flower via<use> elements. Thisbehavior is standardized, though only a few browsers support the:hover pseudo-class and other more complex CSS selectors on elements referenced via<use> elements, at the moment. There issome discussion about what rules apply to such referenced elements.
See below how the structure then looks like.
html
<svg width="600px" height="600px" viewBox="-300 -300 600 600" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet" href="style8.css" type="text/css" /> <title>SVG demonstration</title> <desc>Mozilla CSS Getting Started - SVG demonstration</desc> <defs> <g> <path d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path d="M0,-200 a40,40 0 0,0 -62,10" /> </g> <g> <use href="#segment" /> <use href="#segment" transform="rotate(18)" /> <use href="#segment" transform="rotate(36)" /> <use href="#segment" transform="rotate(54)" /> <use href="#segment" transform="rotate(72)" /> </g> <g> <use href="#quadrant" /> <use href="#quadrant" transform="rotate(90)" /> <use href="#quadrant" transform="rotate(180)" /> <use href="#quadrant" transform="rotate(270)" /> </g> <radialGradient cx="0" cy="0" r="200" gradientUnits="userSpaceOnUse"> <stop offset="33%" /> <stop offset="95%" /> </radialGradient> </defs> <text x="-280" y="-270">SVG demonstration</text> <text x="-280" y="-250"> Move your mouse pointer over the flower. </text> <g> <circle cx="0" cy="0" r="200" stroke="none" fill="url(#fade)" /> <use href="#petals" /> <use href="#petals" transform="rotate(9) scale(0.33)" /> </g></svg>What next?
In this demonstration, your SVG-enabled browser already knows how to display SVG elements. The stylesheet only modifies the display in certain ways. This is also true for HTML documents. But you can use CSS for general-purpose XML documents, where there is no predefined way to display the elements. The next page demonstrates this:XML introduction