Domyślny kolor tła elementu głównego SVG

Chciałbym ustawić domyślny kolor tła dla całego dokumentu SVG, na przykład czerwony.

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

Powyższe rozwiązanie działa, ale właściwość background atrybutu style nie jest niestety standardowa: http://www.w3.org/TR/SVG/styling.html#SVGStylingProperties , więc jest usuwana podczas procesu czyszczenia za pomocą SVG Odkurzacz.

Czy istnieje inny sposób zadeklarowania tego koloru tła?

SVG 1.2 Tiny ma wypełnienie obszaru roboczego Nie jestem pewien, jak szeroko zaimplementowana jest ta właściwość, ponieważ większość przeglądarek jest obecnie na SVG 1.1. Opera implementuje to FWIW.

Obecnie bardziej korzystnym rozwiązaniem dla różnych przeglądarek byłoby umieszczenie <rect>elementu o szerokości i wysokości 100% oraz fill = "red" jako pierwszego <svg>elementu podrzędnego elementu, na przykład:

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

Znalazłem to działa w Safari. SVG tylko koloruje z kolorem tła tam, gdzie obejmuje obwiednię elementu. Więc nadaj mu obramowanie (obrys) z granicą zerową pikseli. Wypełnia całość kolorem tła.

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

Jest to odpowiedź @Robert Longson, teraz z kodem (pierwotnie nie było kodu, został dodany później):

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

Ta odpowiedź wykorzystuje:

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

Pozwólcie, że przedstawię bardzo proste rozwiązanie, które znalazłam, a nie zostało zapisane w poprzednich odpowiedziach. Chciałem również ustawić tło w SVG, ale chcę również, aby działało to w samodzielnym pliku SVG.

Cóż, to rozwiązanie jest naprawdę proste, w rzeczywistości SVG obsługuje tagi stylów, więc możesz zrobić coś takiego

<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50">
  <style>svg { background-color: red; }</style>
  <text>hello</text>
</svg>

Obecnie pracuję nad takim plikiem:

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

Próbowałem to umieścić w style.css:

svg {
  background: #bf1f1f;
}

To działa na chromie i Firefox, ale nie sądzę, że jest to dobra praktyka . Przeglądarka obrazów EyeOfGnome go nie renderuje, a Inkscape używa specjalnej przestrzeni nazw do przechowywania takiego tła:

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

Wygląda na to, że element główny SVG nie jest częścią elementów do malowania w zaleceniach SVG.

Sugerowałbym więc skorzystanie z rozwiązania „prostego”, dostarczonego przez Roberta Longsona, ponieważ wydaje mi się, że nie jest to zwykły „hack”. Wydaje się, że to standardowy sposób ustawiania tła w formacie SVG.

Innym obejściem może być użycie <div>tego samego rozmiaru do zawijania pliku <svg>. Następnie będziesz mógł złożyć wniosek"background-color" , a "background-image"to wpłynie na svg.

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

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