Colore di sfondo predefinito dell'elemento radice SVG


134

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?


1
Probabilmente c'è anche un bug in SVG Cleaner? Rimuove anche i blocchi di stile in linea, sebbene siano standard: w3.org/TR/SVG/styling.html#StylingWithCSS
Volker E.

Risposte:


120

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"/>

24
Il tipo di hack retto funziona, ma presuppone che le proporzioni dello svg corrispondano sempre alla finestra che ottiene, quindi non riempirà l'intera finestra in tutte le situazioni.
Erik Dahlström,

1
quando le proporzioni non corrispondono al viewport, l'utilizzo width="10000%" height="10000%"potrebbe risolverlo. in caso contrario, aggiungere alcuni zeri
mulllhausen,

1
@mulllhausen purtroppo l'aggiunta di un valore fino al 10000000% non ha funzionato. altri suggerimenti?
Crashalot,

Una viewport-fillrichiesta di pull abbandonata di caniuse: github.com/Fyrd/caniuse/issues/2186 Perché perché perché hanno lasciato morire SVG.
Ciro Santilli 26 冠状 病 六四 事件 法轮功

47

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>


5
Questo fa sì che anche tutti i tratti degli elementi secondari abbiano larghezza zero, quindi non è una buona opzione di "sfondo".
duanev,


20

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>

Soluzione piacevole e semplice!
conceptdeluxe,

1
Anche se questo funziona in generale in tutti i browser, l'impostazione del background-colordel <svg>elemento farà l'IE11 rendere il colore di sfondo anche al di fuori dell'area definita con l' viewBoxattributo. Questo non ha importanza durante l'utilizzo widthe gli heightattributi.
conceptdeluxe

@conceptdeluxe osservazione interessante, in teoria lo stile codificato all'interno di svg dovrebbe applicarsi solo all'interno di svg. Tuttavia, l'impostazione della larghezza e dell'altezza è quasi sempre necessaria.
Gianluca Casati,

C'è una differenza tra <svg style"...."></svg>e <svg><style>...</style></svg>, supponendo che il <style>tag sia al livello più alto? In caso contrario, questa risposta sembra proprio la soluzione originale dell'OP, riconfezionata con una sintassi diversa. (Ma forse questa soluzione sopravvive a SVG Cleaner, mentre <svg style="..."></svg>no?)
Labrador,

@Labrador stavo cercando una soluzione, ho visto questa domanda, poi ho trovato il modo di risolverlo e condividerlo. Non lo so, sembra che siano supportati solo gli attributi riportati in questo w3.org/TR/SVG/styling.html#SVGStylingProperties . D'altra parte la soluzione che ho proposto funziona e mi piace anche perché puoi personalizzare altri tag SVG, come path, rect, ecc. La caratteristica principale per me è che funziona anche per SVG standalone.
Gianluca Casati,

10

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.


4
<rect width = "100%" height = "100%" fill = "white" /> all'inizio risolve il problema per eog
nvrandow

2

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>

12
Questa soluzione è un hack HTML. E può funzionare solo se si utilizza SVG in una pagina Web. Questa non è una vera soluzione SVG.
Charles-Édouard Coste,

Il colore di sfondo dell'SVG viene preso in prestito dal componente in cui si trova. (Un po 'come svg prende in prestito il colore della pagina e il colore predefinito della pagina è bianco). In qualche modo non penso che sia un hack.
clinux il

@clinux: Quello che Charles stava cercando di dire è che funziona perfettamente per il rendering delle pagine web ma supponi di voler usare lo stesso svg di un'immagine con estensione .svg per renderizzarlo altrove, potrebbe non funzionare.
Arunkumar Srisailapathi,
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.