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, 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 lamentablemente 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 Cleaner.

¿Hay otra forma de declarar este color de fondo?

preguntado el 02 de julio de 12 a las 12:07

¿Probablemente también hay 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#EstilismoConCSS -

7 Respuestas

SVG 1.2 Tiny tiene viewport-llenar No estoy seguro de qué tan ampliamente implementada está esta propiedad, ya que la mayoría de los navegadores apuntan a SVG 1.1 en este momento. Opera lo implementa FWIW.

Actualmente, una solución más cruzada entre navegadores sería pegar un <rect> elemento con ancho y alto del 100% y fill="red" como el primer hijo del <svg> elemento, por ejemplo:

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

Respondido 04 Oct 18, 23:10

El rect hack funciona, pero asume que la relación de aspecto del svg siempre coincide con la ventana gráfica que obtiene, por lo que no llenará toda la ventana gráfica en todas las situaciones. - Erik Dahlström

cuando la relación de aspecto no coincide con la ventana gráfica, entonces usando width="10000%" height="10000%" puede arreglarlo. si no, agregue algunos ceros - Mulllhausen

@mulllhausen lamentablemente agregar un valor tan alto como 10000000% no funcionó. ¿cualquier otra sugerencia? - Crashalot

un abandonado viewport-fill solicitud de extracción caniusa: github.com/Fyrd/caniuse/issues/2186 ¿Por qué por qué dejaron morir a SVG? - Ciro Santilli 新疆 再教育 营 六四 事件 法轮功 郝海东

@ErikDahlström Consulte la solución en stackoverflow.com/a/69899106/6747994 - JoKalliauer

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

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

Respondido el 03 de diciembre de 13 a las 17:12

Esto hace que todos los trazos de subelementos también tengan un ancho cero, por lo que no es una buena opción de "fondo". - duanev

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:

Respondido el 19 de Septiembre de 19 a las 16:09

Permítanme informar una solución muy simple que encontré, que no está escrita en las respuestas anteriores. También quería establecer un 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>

Respondido 03 Oct 18, 07:10

¡Solución agradable y sencilla! - conceptodeluxe

Aunque esto funciona en general en todos los navegadores, configurar el background-color de los <svg> hará que el IE11 reproduzca el color de fondo también fuera del área definida con el viewBox atributo. Esto no importa cuando se usa width y height Aunque los atributos. - conceptodeluxe

@conceptdeluxe observación interesante, en teoría, el estilo codificado dentro de svg debería aplicarse solo dentro de svg. Sin embargo, casi siempre es necesario establecer el ancho y la altura. - Gianluca Casati

Hay una diferencia entre <svg style"...."></svg> y <svg><style>...</style></svg>, asumiendo el <style> la etiqueta está en el nivel superior? De lo contrario, esta respuesta parece la solución original del OP, reempaquetada con una sintaxis diferente. (Pero tal vez esta solución sobreviva a SVG Cleaner, mientras que <svg style="..."></svg> ¿no?) - Labrador

@Labrador Estaba buscando soluciones, vi esta pregunta, luego encontré una manera de resolverla y la compartí. No sé, parece que los únicos atributos reportados en este w3.org/TR/SVG/styling.html#SVGSPropiedades de estilo son compatibles. Por otro lado, la solución que propuse funciona y me gusta porque también puedes diseñar otras etiquetas SVG, como ruta, rect, etc. La característica principal para mí es que también funciona para SVG independientes. - Gianluca Casati

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;
}

Es trabajando en Chromium y Firefox, pero No creo que sea una buena práctica.. El visor de imágenes EyeOfGnome no lo representa, 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 elementos pintables en las recomendaciones SVG.

Así que sugiero usar el solución "rect" proporcionada por Robert Longson porque supongo que no es un simple "hackeo". parece ser el forma estándar para establecer un fondo con SVG.

contestado el 23 de mayo de 17 a las 13:05

al principio resuelve el problema de eog - nvrandow

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

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

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

Respondido 26 Oct 13, 04:10

Esta solución es un truco de 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 de página predeterminado es el blanco). De alguna manera no creo que sea un truco. - linux

@clinux: lo que Charles estaba tratando de decir es que funciona perfectamente para la representación de páginas web, pero suponga que desea usar el mismo svg como una imagen con la extensión .svg para representarla en otro lugar, es posible que no funcione. - Arunkumar Srisailapathi

background y background-color no son ampliamente compatibles

el código más corto sin es dibujar un círculo con un radio de 10000, esto también funciona para relaciones de aspecto de ancho-alto diferentes a viewBox.

<circle r="1e5" fill="red"/>

<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
 <circle r="1e5" fill="red"/>
</svg>

respondido 09 nov., 21:16

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.