Couleur d'arrière-plan par défaut de l'élément racine SVG

Je voudrais définir une couleur d'arrière-plan par défaut pour tout le document SVG, au rouge par exemple.

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

La solution ci-dessus fonctionne mais la propriété background de l'attribut style n'est malheureusement pas standard: http://www.w3.org/TR/SVG/styling.html#SVGStylingProperties , et donc elle est supprimée pendant le processus de nettoyage avec SVG Nettoyeur.

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

SVG 1.2 Tiny a viewport-fill Je ne suis pas sûr de l'ampleur de l'implémentation de cette propriété, car la plupart des navigateurs ciblent SVG 1.1 pour le moment. Opera l'implémente FWIW.

Une solution plus multi-navigateur actuellement serait de coller un <rect>élément avec une largeur et une hauteur de 100% et fill = "red" comme premier enfant de l' <svg>élément, par exemple:

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

J'ai trouvé que cela fonctionne dans Safari. SVG ne colore que la couleur d'arrière-plan là où le cadre de délimitation d'un élément couvre. Alors, donnez-lui une bordure (trait) avec une limite de zéro pixel. Il remplit le tout pour vous avec votre couleur d'arrière-plan.

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

C'est la réponse de @Robert Longson, maintenant avec du code (il n'y avait pas de code à l'origine, il a été ajouté plus tard):

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

Cette réponse utilise:

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

Permettez-moi de rapporter une solution très simple que j'ai trouvée, qui n'est pas écrite dans les réponses précédentes. Je voulais également définir l'arrière-plan dans un SVG, mais je veux aussi que cela fonctionne dans un fichier SVG autonome.

Eh bien, cette solution est vraiment simple, en fait SVG prend en charge les balises de style, vous pouvez donc faire quelque chose comme

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

Je travaille actuellement sur un fichier comme celui-ci:

<?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 ceci dans style.css:

svg {
  background: #bf1f1f;
}

Cela fonctionne sur Chromium et Firefox, mais je ne pense pas que ce soit une bonne pratique . La visionneuse d'images EyeOfGnome ne le rend pas et Inkscape utilise un espace de noms spécial pour stocker un tel arrière-plan:

<?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 l'élément racine SVG ne fasse pas partie des éléments pouvant être peints dans les recommandations SVG.

Je suggère donc d'utiliser la solution "rect" fournie par Robert Longson car je suppose que ce n'est pas un simple "hack". Cela semble être la manière standard de définir un arrière-plan avec SVG.

Une autre solution de contournement peut être d'utiliser <div>la même taille pour envelopper le fichier <svg>. Après cela, vous pourrez postuler "background-color", et "background-image"cela affectera le svg.

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

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