Color de fondo predeterminado del elemento raíz SVG

134

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?

Delapouite
fuente
1
¿Probablemente también haya un error en SVG Cleaner? También elimina los bloques de estilo en línea, aunque son estándar: w3.org/TR/SVG/styling.html#StylingWithCSS
Volker E.

Respuestas:

120

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"/>
Robert Longson
fuente
24
El hack rect funciona, pero supone que la relación de aspecto del svg siempre coincide con la ventana gráfica que obtiene, por lo que no ocupará la ventana gráfica completa en todas las situaciones.
Erik Dahlström
1
cuando la relación de aspecto no coincide con la ventana gráfica, el uso width="10000%" height="10000%"puede solucionarlo. si no, entonces agregue algunos ceros
mulllhausen
1
@mulllhausen desafortunadamente, agregar un valor tan alto como 10000000% no funcionó. ¿cualquier otra sugerencia?
Crashalot
Una viewport-fillsolicitud de extracción de caniuse abandonada : github.com/Fyrd/caniuse/issues/2186 ¿Por qué, por qué dejaron morir a SVG?
Ciro Santilli 郝海东 冠状 病 六四 事件 法轮功
47

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>

cwingrav
fuente
55
Esto hace que todos los trazos de subelementos sean de ancho cero también, por lo que no es una buena opción de "fondo".
duanev
20

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>
Gianluca Casati
fuente
¡Una solución agradable y simple!
conceptdeluxe
1
Aunque esto funciona, en general, en todos los navegadores, estableciendo el background-colordel <svg>elemento hará que el EI11 hacen que el color de fondo también fuera del área definida con el viewBoxatributo. Sin embargo, esto no importa al usar widthy los heightatributos.
conceptdeluxe
Observación interesante de @conceptdeluxe, en teoría el estilo codificado dentro de svg debería aplicarse solo dentro de svg. Sin embargo, establecer el ancho y la altura casi siempre es necesario.
Gianluca Casati
¿Hay alguna diferencia entre <svg style"...."></svg>y <svg><style>...</style></svg>, suponiendo que la <style>etiqueta esté en el nivel superior? Si no, entonces esta respuesta parece la solución original del OP, reempaquetada bajo una sintaxis diferente. (¿Pero tal vez esta solución sobrevive a SVG Cleaner, mientras <svg style="..."></svg>que no?)
Labrador
@Labrador Estaba buscando soluciones, vi esta pregunta, luego encontré una manera de resolverla y la compartí. No sé, parece que solo se admiten los atributos informados en este w3.org/TR/SVG/styling.html#SVGStylingProperties . Por otro lado, la solución que propuse funciona y me gusta porque también puede diseñar otras etiquetas SVG, como path, rect, etc. La característica principal para mí es que también funciona para SVG independientes.
Gianluca Casati
10

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.

Charles-Édouard Coste
fuente
44
<rect width = "100%" height = "100%" fill = "white" /> al principio resuelve el problema para eog
nvrandow
2

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>
muyueh
fuente
12
Esta solución es un hack HTML. Y puede funcionar solo si está utilizando SVG en una página web. Esta no es una verdadera solución SVG.
Charles-Édouard Coste
El color de fondo del SVG se toma prestado del componente en el que se encuentra. (Algo así como svg toma prestado el color de la página, y el color predeterminado de la página es blanco). De alguna manera no creo que sea un truco.
clinux
@clinux: Lo que Charles intentaba decir es que funciona perfectamente para la representación de páginas web, pero supongamos que desea utilizar el mismo svg como imagen con la extensión .svg para representarlo en otro lugar, puede que no funcione.
Arunkumar Srisailapathi