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

142

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?

Delapouite
źródło
1
Czy prawdopodobnie jest też błąd w SVG Cleaner? Usuwa również bloki stylu inline, chociaż są one standardowe: w3.org/TR/SVG/styling.html#StylingWithCSS
Volker E.

Odpowiedzi:

130

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"/>
Robert Longson
źródło
25
Robienie prostego hakowania działa, ale zakłada, że ​​proporcje svg zawsze pasują do wyświetlanego obszaru, więc nie wypełni on całego obszaru roboczego we wszystkich sytuacjach.
Erik Dahlström
1
kiedy współczynnik proporcji nie pasuje do rzutni, użycie width="10000%" height="10000%"może to naprawić. jeśli nie, to dodaj kilka zer
mulllhausen
1
@mulllhausen niestety nie udało się dodać wartości nawet 10000000%. jakieś inne sugestie?
Crashalot
Porzucona viewport-fillprośba o ściągnięcie caniuse: github.com/Fyrd/caniuse/issues/2186 Dlaczego dlaczego pozwolili SVG umrzeć.
Ciro Santilli 郝海东 冠状 病 六四 事件 法轮功
48

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>

cwingrav
źródło
6
Powoduje to, że wszystkie obrysy elementu podrzędnego również mają zerową szerokość, więc nie jest to dobra opcja „tła”.
duanev
22

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>
Gianluca Casati
źródło
Ładne i proste rozwiązanie!
conceptdeluxe
1
Pomimo tego, że w ogóle działa we wszystkich przeglądarkach, ustawienie background-colortego <svg>elementu spowoduje, że IE11 renderowania koloru tła także poza obszar zdefiniowany z viewBoxatrybutem. Nie ma to jednak znaczenia w przypadku używania atrybutów widthi height.
conceptdeluxe
@conceptdeluxe ciekawa obserwacja, w teorii styl zakodowany w svg powinien mieć zastosowanie tylko w svg. Jednak ustawienie szerokości i wysokości jest prawie zawsze konieczne.
Gianluca Casati
Czy jest różnica między <svg style"...."></svg>i <svg><style>...</style></svg>, zakładając, że <style>tag znajduje się na najwyższym poziomie? Jeśli nie, to ta odpowiedź wydaje się po prostu oryginalnym rozwiązaniem OP, przepakowanym pod inną składnią. (Ale może to rozwiązanie przetrwa SVG Cleaner, a <svg style="..."></svg>nie?)
Labrador
@Labrador Szukałem rozwiązania, zobaczyłem to pytanie, a potem znalazłem sposób, aby je rozwiązać i udostępnić. Nie wiem, wygląda na to, że obsługiwane są jedyne atrybuty zgłoszone w tym w3.org/TR/SVG/styling.html#SVGStylingProperties . Z drugiej strony rozwiązanie, które zaproponowałem, działa i podoba mi się również, ponieważ możesz stylizować inne tagi SVG, takie jak ścieżka, prostokąt itp. Główną cechą dla mnie jest to, że działa również dla samodzielnych SVG.
Gianluca Casati
10

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.

Charles-Édouard Coste
źródło
4
<rect width = "100%" height = "100%" fill = "white" /> na początku rozwiązuje problem z eog
nvrandow
2

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>
muyueh
źródło
12
To rozwiązanie to hack HTML. I może działać tylko wtedy, gdy używasz SVG na stronie internetowej. To nie jest prawdziwe rozwiązanie SVG.
Charles-Édouard Coste
Kolor tła SVG jest zapożyczony z komponentu, w którym się znajduje. (Tak jak svg pożycza kolor strony, a domyślnym kolorem strony jest biały). Jakoś nie sądzę, że to hack.
clinux
@clinux: Charles próbował powiedzieć, że działa idealnie do renderowania stron internetowych, ale przypuśćmy, że chcesz użyć tego samego pliku SVG jako obrazu z rozszerzeniem .svg do renderowania go w innym miejscu, może to nie działać.
Arunkumar Srisailapathi