Colore di sfondo predefinito dell'elemento radice SVG

Vorrei impostare un colore di sfondo predefinito per l'intero documento SVG, ad esempio in rosso.

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

La soluzione sopra funziona ma la proprietà in background dell'attributo style non è purtroppo standard: http://www.w3.org/TR/SVG/styling.html#SVGStylingProperties , e quindi viene rimossa durante il processo di pulizia con SVG Cleaner.

C'è un altro modo per dichiarare questo colore di sfondo?

SVG 1.2 Tiny ha viewport-fill Non sono sicuro di quanto sia ampiamente implementata questa proprietà, dato che la maggior parte dei browser sta prendendo di mira SVG 1.1 in questo momento. Opera lo implementa FWIW.

Una soluzione più cross-browser attualmente sarebbe quella di incollare un <rect>elemento con larghezza e altezza del 100% e riempire = "rosso" come primo figlio <svg>dell'elemento, ad esempio:

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

Trovato che funziona in Safari. SVG colora solo con il colore di sfondo in cui copre il riquadro di delimitazione di un elemento. Quindi, dagli un bordo (tratto) con un limite di zero pixel. Riempie tutto per te con il tuo colore di sfondo.

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

È la risposta di @Robert Longson, ora con codice (in origine non c'era codice, è stato aggiunto in seguito):

<?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>

Questa risposta utilizza:

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

Vorrei segnalare una soluzione molto semplice che ho trovato, che non è stata scritta nelle risposte precedenti. Volevo anche impostare lo sfondo in un file SVG, ma voglio anche che funzioni in un file SVG autonomo.

Bene, questa soluzione è davvero semplice, infatti SVG supporta i tag di stile, quindi puoi fare qualcosa del genere

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

Attualmente sto lavorando a un file come questo:

<?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">
...

E ho provato a metterlo in style.css:

svg {
  background: #bf1f1f;
}

Sta lavorando su Cromo e Firefox, ma non credo che sia una buona pratica . Il visualizzatore di immagini EyeOfGnome non lo rende e Inkscape utilizza uno spazio dei nomi speciale per memorizzare un tale sfondo:

<?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" ... >

Bene, sembra che l'elemento radice SVG non faccia parte degli elementi verniciabili nelle raccomandazioni SVG.

Quindi suggerirei di usare la soluzione "rect" fornita da Robert Longson perché immagino che non sia un semplice "hack". Sembra essere il modo standard per impostare uno sfondo con SVG.

Un'altra soluzione alternativa potrebbe essere quella di utilizzare <div>le stesse dimensioni per avvolgere il file <svg>. Successivamente, sarai in grado di applicare "background-color"e "background-image"ciò influenzerà il svg.

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

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