web-dev-qa-db-fra.com

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

J'aimerais définir une couleur d'arrière-plan par défaut pour l'ensemble du document SVG, en 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 une propriété standard: http://www.w3.org/TR/SVG/styling.html#SVGStylingProperties , enlevé pendant le processus de nettoyage avec SVG Cleaner.

Y a-t-il un autre moyen de déclarer cette couleur de fond?

svg
111
Delapouite

SVG 1.2 Tiny a viewport-fill Je ne sais pas dans quelle mesure cette propriété est implémentée, car la plupart des navigateurs visent SVG 1.1 pour le moment. Opera l'implémente FWIW.

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

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

Trouvé cela fonctionne dans Safari. SVG n'utilise que les couleurs avec la couleur d'arrière-plan couvrant le cadre de sélection d'un élément. Donc, 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>

42
cwingrav

C'est la réponse de Robert Longson, maintenant avec le code:

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

26
JoKalliauer

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

Eh bien, cette solution est très simple. En fait, SVG prend en charge les balises de style afin que vous puissiez 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>
14
Gianluca Casati

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 Chrome et Firefox, mais je ne pense pas que ce soit une bonne pratique . La visionneuse d'images EyeOfGnome ne le restitue 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 de éléments pouvant être peints dans les recommandations SVG.

Je suggérerais donc d’utiliser la solution "rect" fournie par Robert Longson car j’imagine que ce n’est pas un simple "hack". Il semble que ce soit la manière standard de définir un arrière-plan avec SVG.

10
Charles-Édouard Coste

Une autre solution consiste à utiliser <div> de la même taille pour envelopper le <svg>. Après cela, vous pourrez appliquer "background-color" et "background-image" qui affecteront lesvg.

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

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