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

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#SVGStylingProperties, et 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?

InformationsquelleAutor Delapouite | 2012-07-02
  1. 97

    SVG 1.2 Minuscule a fenêtre d'affichage de remplissage 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 cross-browser solution serait de coller un <rect> élément avec une largeur et une hauteur de 100% et fill="rouge" comme le premier enfant de la <svg> élément, par exemple:

    <rect width="100%" height="100%" fill="red"/>
    • Le rect hack genre de travaux, mais il suppose que le ratio d'aspect de la svg correspond toujours à la fenêtre, il obtient, de manière à ne pas remplir toute la fenêtre d'affichage dans toutes les situations.
    • Ci-dessous un exemple de code: stackoverflow.com/a/47295360/6747994
    • lorsque le rapport d'aspect ne correspond pas à la fenêtre d'affichage, puis en utilisant width="10000%" height="10000%" peut fixer. si non, puis ajouter quelques zéros
    • malheureusement, l'ajout d'une valeur aussi élevée que 10000000% n'ont pas de travail. toutes les autres suggestions?
    InformationsquelleAutor Robert Longson
  2. 42

    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>

    • Ainsi, tous les sous-élément de touches de largeur nulle, donc ce n'est pas un bon "arrière-plan" option.
    InformationsquelleAutor cwingrav
  3. 28

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

    HTML:

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

    InformationsquelleAutor JoKalliauer
  4. 15

    Permettez-moi de signaler une solution très simple que j'ai trouvé, qui n'est pas écrit dans les réponses précédentes. J'ai aussi voulu mettre en arrière-plan dans un SVG, mais je veux aussi que cela fonctionne en autonome fichier SVG.

    Bien, cette solution est vraiment simple, en fait SVG prend en charge les balises de style, de sorte que vous pouvez 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>
    • Agréable et simple solution!
    • Si cela fonctionne en général dans tous les navigateurs, la définition de la background-color de la <svg> élément fera l'IE11 le rendu de la couleur d'arrière-plan également en dehors de la zone définie à l' viewBox attribut. Cela n'a pas d'importance lors de l'utilisation de width et height attributs bien.
    • observation intéressante, en théorie, le style codé à l'intérieur de svg ne devrait s'appliquer qu'à l'intérieur de svg. Toutefois, le réglage de la largeur et de la hauteur est presque toujours nécessaire.
    • Est-il une différence entre <svg style"...."></svg> et <svg><style>...</style></svg>, en supposant que le <style> balise est au haut niveau? Si non, alors cette réponse semble juste comme l'OP solution originale, reconditionné en vertu d'une syntaxe différente. (Mais peut-être que cette solution survit SVG Cleaner, alors que <svg style="..."></svg> ne l'est pas?)
    • Je cherchais des solutions, vu à cette question, alors trouvé un moyen de le résoudre, et le partage. Je ne sais pas, il semble que seuls les attributs déclarés dans ce w3.org/TR/SVG/styling.html#SVGStylingProperties sont pris en charge. D'autre part, la solution que j'ai proposée fonctionne et je l'aime aussi vous pouvez définir le style d'autres balises SVG, comme le chemin, rect, etc. Le principal pour moi est que cela fonctionne aussi pour les SVGs.
    InformationsquelleAutor Gianluca Casati
  5. 10

    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 de travail 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" ... >

    Bien, il semble que SVG élément racine n'est pas une partie de peut être peint éléments en 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 façon standard pour définir un arrière-plan avec SVG.

    • <rect width="100%" height="100%" fill="white" /> au début résout le problème pour eog
    InformationsquelleAutor Charles-Édouard Coste
  6. 2

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

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

<style type="text/css">
.background{
  background-color: black; 
  /*background-image: */
}
</style>
    • Cette solution est un HTML hack. Et peut fonctionner uniquement si vous êtes en utilisant SVG dans une page web. Ce n'est pas un vrai SVG solution.
    • La couleur de fond du SVG est emprunté du composant, il est assis dans. (un peu comme svg emprunte la page couleur, et la page par défaut de la couleur est le blanc). De toute façon je ne pense pas que c'est un hack.
    • Ce que Charles était en train de dire est, il fonctionne parfaitement pour de rendu de pages web mais supposons que vous voulez utiliser le même format svg est une image avec .svg extension pour le rendu d'ailleurs, il peut ne pas fonctionner.
    InformationsquelleAutor muyueh