Couleur de fond par défaut de SVG de l'élément racine

Question

J'aimerais définir une couleur de fond par défaut pour l'ensemble du document SVG, de rouge par exemple.

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

La solution ci-dessus fonctionne, mais le fond de la propriété de l'attribut style est malheureusement pas un standard : http://www.w3.org/TR/SVG/styling.html#SVGStylingPropertieset donc il s'est retiré pendant le processus de nettoyage avec SVG Cleaner.

Est-il une autre façon de déclarer cette couleur d'arrière-plan?

Answer 1

SVG 1.2 Minuscule a viewport remplir je ne suis pas sûr de la façon largement mis en œuvre cette propriété est même si, comme la plupart des navigateurs sont originaires de SVG 1.1 en ce moment. L'opéra met en œuvre, FWIW.

Plus de croix-navigateur solution serait de coller un <rect> élément avec une largeur et une hauteur de 100% et fill="rouge" comme le premier enfant de l' <svg> élément

Answer 2

Trouvé cela fonctionne dans Safari. SVG n'couleurs avec la couleur d'arrière-plan lorsqu'un élément de la boîte englobante couvre. Donc, lui donner une frontière (avc) avec un zéro pixel limites. Il remplit, le tout pour vous avec votre couleur d'arrière-plan.

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

Answer 3

Je suis actuellement en train de travailler sur un fichier comme ceci:

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

Et j'ai essayé de mettre cela en style.css:

svg {
  background: #bf1f1f;
}

C'est en travaillant sur Chrome et Firefox, mais je ne pense pas que c'est une bonne pratique. EyeOfGnome image viewer ne pas le rendre, et Inkscape utilise un espace de noms particulier pour stocker un tel contexte:

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

Eh bien, il semble que SVG élément racine n'est pas une partie de poncer les éléments SVG recommandations.

Donc, je vous suggère d'utiliser le "rect" solution fournie par Robert Longson parce que j'imagine que ce n'est pas un simple "hack". Il semble être le standard de façon à définir un arrière-plan avec SVG.

Answer 4

Une autre solution pourrait être d'utiliser <div> de la même taille pour envelopper l' <svg>. Après cela, vous serez en mesure d'appliquer "background-color", et "background-image" qui affecteront l'svg.

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

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