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?
Antworten:
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:quelle
width="10000%" height="10000%"
kann es durch Verwendung behoben werden. wenn nicht, dann füge einige Nullen hinzuviewport-fill
Caniuse-Pull-Anfrage: github.com/Fyrd/caniuse/issues/2186 Warum, warum, warum haben sie SVG sterben lassen ?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>
quelle
Es ist die Antwort von @Robert Longson, jetzt mit Code (es gab ursprünglich keinen Code, er wurde später hinzugefügt):
Diese Antwort verwendet:
quelle
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
quelle
background-color
des<svg>
Elements die Hintergrundfarbe auch außerhalb des mit demviewBox
Attribut definierten Bereichs rendern . Dies spielt jedoch bei der Verwendung vonwidth
undheight
Attributen keine Rolle .<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?)Ich arbeite derzeit an einer Datei wie dieser:
Und ich habe versucht, dies in
style.css
: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:
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.
quelle
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 diesvg
.quelle