bluePhlavio bluePhlavio - 1 month ago 17
HTML Question

Style svg root element inside html page

In a svg document I can assign a background color to svg root element with something like this:

<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink= "http://www.w3.org/1999/xlink"
version="1.1"
width="100%" height="100%">
<style>
:root {
background: blue;
}
</style>
<circle cx="50%" cy="50% r="25%" fill="orange">
</svg>


But when the svg is inserted inside a html page :root refers to the html tag, not the svg root element. For many reasons I have to style the background of the svg root element through the style element, so for example I cannot add the style="background: blue" attribute to svg element or use javascript. Any idea?

Answer

Just apply the background style via svg { ... }.

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink= "http://www.w3.org/1999/xlink"
     version="1.1"
     width="100%" height="100%">
<style>
   svg {
      background: blue;
   }
</style>
<circle cx="50%" cy="50%" r="25%" fill="orange"/>
</svg>

Note also: I've fixed your broken <circle> element.

Comments