Color de fondo predeterminado del elemento raíz SVG

Me gustaría establecer un color de fondo predeterminado para todo el documento SVG, por ejemplo, en rojo.

<svg viewBox="0 0 500 600" style="background: red">/* content */</svg>

La solución anterior funciona, pero la propiedad de fondo del atributo de estilo desafortunadamente no es estándar: http://www.w3.org/TR/SVG/styling.html#SVGStylingProperties , por lo que se elimina durante el proceso de limpieza con SVG Limpiador.

¿Hay otra forma de declarar este color de fondo?

SVG 1.2 Tiny tiene relleno de ventana gráfica No estoy seguro de cuán ampliamente implementada está esta propiedad, ya que la mayoría de los navegadores están apuntando a SVG 1.1 en este momento. Opera lo implementa FWIW.

Una solución más cruzada en el navegador sería pegar un <rect>elemento con un ancho y una altura del 100% y llenar = "rojo" como el primer <svg>elemento secundario del elemento, por ejemplo:

<rect width="100%" height="100%" fill="red"/>

Encontré que esto funciona en Safari. SVG solo colorea con color de fondo donde cubre el cuadro delimitador de un elemento. Entonces, dele un borde (trazo) con un límite de cero píxeles. Completa todo para ti con tu color de fondo.

<svg style='stroke-width: 0px; background-color: blue;'> </svg>

Es la respuesta de @Robert Longson, ahora con código (originalmente no había código, se agregó más tarde):

<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
 <rect width="100%" height="100%" fill="red"/>
</svg>

Esta respuesta usa:

• https://stackoverflow.com/a/11293812/6747994
• https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Fills_and_Strokes

Permítanme informar una solución muy simple que encontré, que no está escrita en respuestas anteriores. También quería establecer el fondo en un SVG, pero también quiero que esto funcione en un archivo SVG independiente.

Bueno, esta solución es realmente simple, de hecho, SVG admite etiquetas de estilo, por lo que puede hacer algo como

<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50">
  <style>svg { background-color: red; }</style>
  <text>hello</text>
</svg>

Actualmente estoy trabajando en un archivo como este:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<?xml-stylesheet type="text/css" href="style.css" ?>
<svg
  xmlns="http://www.w3.org/2000/svg"
  version="1.1"
  width="100%"
  height="100%"
  viewBox="0 0 600 600">
...

Y traté de poner esto en style.css:

svg {
  background: #bf1f1f;
}

Está funcionando en Chromium y Firefox, pero no creo que sea una buena práctica . El visor de imágenes EyeOfGnome no lo procesa, e Inkscape usa un espacio de nombres especial para almacenar dicho fondo:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
    xmlns="http://www.w3.org/2000/svg"
    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
    version="1.1"
    ...
  <sodipodi:namedview
     pagecolor="#480000" ... >

Bueno, parece que el elemento raíz SVG no es parte de los elementos pintables en las recomendaciones SVG.

Por lo tanto, sugeriría utilizar la solución "rect" proporcionada por Robert Longson porque supongo que no es un simple "hack". Parece ser la forma estándar de establecer un fondo con SVG.

Otra solución podría ser usar <div>el mismo tamaño para envolver el <svg>. Después de eso, podrás postularte "background-color", y "background-image"eso afectará a svg.

<div class="background">
  <svg></svg>
</div>

<style type="text/css">
.background{
  background-color: black; 
  /*background-image: */
}
</style>