Standardhintergrundfarbe des SVG-Stammelements

134

Ich möchte eine Standardhintergrundfarbe für das gesamte SVG-Dokument festlegen, z. B. Rot.

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

Die obige Lösung funktioniert, aber die Hintergrundeigenschaft des Stilattributs ist leider keine Standardeigenschaft: http://www.w3.org/TR/SVG/styling.html#SVGStylingProperties , und wird daher während des Reinigungsprozesses mit SVG entfernt Reiniger.

Gibt es eine andere Möglichkeit, diese Hintergrundfarbe zu deklarieren?

Delapouite
quelle
1
Gibt es wahrscheinlich auch einen Fehler in SVG Cleaner? Es entfernt auch Inline- Stilblöcke
Volker E.

Antworten:

120

SVG 1.2 Tiny ist mit Ansichtsfenstern gefüllt. Ich bin mir nicht sicher, wie weit diese Eigenschaft implementiert ist, da die meisten Browser derzeit auf SVG 1.1 abzielen. Opera implementiert es FWIW.

Eine browserübergreifendere Lösung wäre derzeit, ein <rect>Element mit einer Breite und Höhe von 100% zu kleben und = "rot" als erstes untergeordnetes <svg>Element des Elements zu füllen , zum Beispiel:

<rect width="100%" height="100%" fill="red"/>
Robert Longson
quelle
24
Der Rect-Hack funktioniert, aber es wird davon ausgegangen, dass das Seitenverhältnis des SVG immer mit dem Ansichtsfenster übereinstimmt, das es erhält, sodass nicht in allen Situationen das gesamte Ansichtsfenster ausgefüllt wird.
Erik Dahlström
1
Wenn das Seitenverhältnis nicht mit dem Ansichtsfenster übereinstimmt, width="10000%" height="10000%"kann es durch Verwendung behoben werden. wenn nicht, dann füge einige Nullen hinzu
mulllhausen
1
@mulllhausen Das Hinzufügen eines Wertes von 10000000% hat leider nicht funktioniert. Irgendwelche anderen Vorschläge?
Crashalot
Eine aufgegebene viewport-fillCaniuse-Pull-Anfrage: github.com/Fyrd/caniuse/issues/2186 Warum, warum, warum haben sie SVG sterben lassen ?
Ciro Santilli 26 冠状 病 六四 事件 26
47

Gefunden, dass dies in Safari funktioniert. SVG färbt nur mit Hintergrundfarbe ein, wenn der Begrenzungsrahmen eines Elements bedeckt ist. Geben Sie ihm also einen Rand (Strich) mit einer Null-Pixel-Grenze. Es füllt das Ganze für Sie mit Ihrer Hintergrundfarbe aus.

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

cwingrav
quelle
5
Dies führt dazu, dass alle Unterelementstriche ebenfalls eine Breite von Null haben, sodass dies keine gute "Hintergrund" -Option ist.
Duanev
35

Es ist die Antwort von @Robert Longson, jetzt mit Code (es gab ursprünglich keinen Code, er wurde später hinzugefügt):

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

Diese Antwort verwendet:

JoKalliauer
quelle
20

Lassen Sie mich eine sehr einfache Lösung melden, die ich gefunden habe und die in früheren Antworten nicht geschrieben wurde. Ich wollte auch den Hintergrund in einer SVG-Datei festlegen, aber ich möchte auch, dass dies in einer eigenständigen SVG-Datei funktioniert.

Nun, diese Lösung ist wirklich einfach. Tatsächlich unterstützt SVG Style-Tags, sodass Sie so etwas tun können

<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50">
  <style>svg { background-color: red; }</style>
  <text>hello</text>
</svg>
Gianluca Casati
quelle
Schöne und einfache Lösung!
Conceptdeluxe
1
Obwohl dies in allen Browsern im Allgemeinen funktioniert, wird der IE11 durch Festlegen background-colordes <svg>Elements die Hintergrundfarbe auch außerhalb des mit dem viewBoxAttribut definierten Bereichs rendern . Dies spielt jedoch bei der Verwendung von widthund heightAttributen keine Rolle .
Conceptdeluxe
@conceptdeluxe interessante Beobachtung, theoretisch sollte der in svg codierte Stil nur innerhalb von svg gelten. Das Einstellen von Breite und Höhe ist jedoch fast immer erforderlich.
Gianluca Casati
Gibt es einen Unterschied zwischen <svg style"...."></svg>und <svg><style>...</style></svg>, vorausgesetzt, das <style>Tag befindet sich auf der obersten Ebene? Wenn nicht, dann scheint diese Antwort nur die ursprüngliche Lösung des OP zu sein, die unter einer anderen Syntax neu verpackt wurde. (Aber vielleicht überlebt diese Lösung SVG Cleaner, während <svg style="..."></svg>nicht?)
Labrador
@ Labrador Ich suchte nach Lösungen, sah diese Frage, fand dann einen Weg, sie zu lösen und teilte sie. Ich weiß nicht, es sieht so aus, als würden nur die in diesem w3.org/TR/SVG/styling.html#SVGStylingProperties angegebenen Attribute unterstützt. Andererseits funktioniert die von mir vorgeschlagene Lösung und ich mag sie auch, weil Sie andere SVG-Tags wie Pfad, Rechteck usw. formatieren können. Das Hauptmerkmal für mich ist, dass sie auch für eigenständige SVGs funktioniert.
Gianluca Casati
10

Ich arbeite derzeit an einer Datei wie dieser:

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

Und ich habe versucht, dies in style.css:

svg {
  background: #bf1f1f;
}

Es funktioniert mit Chromium und Firefox, aber ich denke nicht, dass es eine gute Praxis ist . EyeOfGnome Image Viewer rendert es nicht und Inkscape verwendet einen speziellen Namespace, um einen solchen Hintergrund zu speichern:

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

Nun, es scheint, dass das SVG- Stammelement nicht Teil der überstreichbaren Elemente in SVG-Empfehlungen ist.

Daher würde ich vorschlagen, die von Robert Longson bereitgestellte "Rect" -Lösung zu verwenden, da es sich vermutlich nicht um einen einfachen "Hack" handelt. Dies scheint die Standardmethode zu sein, um mit SVG einen Hintergrund festzulegen.

Charles-Édouard Coste
quelle
4
<rect width = "100%" height = "100%" fill = "white" /> am Anfang löst das Problem für eog
nvrandow
2

Eine andere Problemumgehung könnte darin bestehen, <div>dieselbe Größe zum Umschließen des zu verwenden <svg>. Danach können Sie sich bewerben "background-color", "background-image"was sich auf die svg.

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

<style type="text/css">
.background{
  background-color: black; 
  /*background-image: */
}
</style>
muyueh
quelle
12
Diese Lösung ist ein HTML-Hack. Und funktioniert möglicherweise nur, wenn Sie SVG in einer Webseite verwenden. Dies ist keine echte SVG-Lösung.
Charles-Édouard Coste
Die Hintergrundfarbe des SVG wird von der Komponente übernommen, in der es sich befindet (ähnlich wie svg die Seitenfarbe ausleiht und die Standardseitenfarbe weiß ist). Irgendwie denke ich nicht, dass es ein Hack ist.
Clinux
@clinux: Was Charles sagen wollte, ist, dass es perfekt für das Rendern von Webseiten funktioniert. Angenommen, Sie möchten dasselbe SVG wie ein Bild mit der Erweiterung .svg verwenden, um es an anderer Stelle zu rendern. Möglicherweise funktioniert es nicht.
Arunkumar Srisailapathi