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?
Odpowiedzi:
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"/>
width="10000%" height="10000%"może to naprawić. jeśli nie, to dodaj kilka zer
viewport-fillprośba o ściągnięcie caniuse: github.com/Fyrd/caniuse/issues/2186 Dlaczego dlaczego pozwolili SVG umrzeć.
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:
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>
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.
<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?)
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>