Standardhintergrundfarbe des SVG-Stammelements

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?

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"/>

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>

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:

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

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>

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.

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>