Określ SVG jako obraz tła i również styl SVG w CSS?

Question

Czy można określić SVG jako obraz tła, a także ustawić styl SVG w tym samym pliku CSS?

Jestem bardzo wygodne umieszczanie, skalowanie i przycinanie obrazów SVG jako pojedyncze pliki lub sprite'ów, ale nie byłem w stanie opracować, czy możliwe jest styl SVG w tym samym pliku CSS, jak ustawia go jako zdjęcie w tle.

W pseudo CSS chciałbym wykonać następujące czynności w celu zmiany koloru prostego kształtu w oparciu o klasy elementu nadrzędnego:

element1 { 
background-image(icon.svg); 
} 

element1.black .svg-pathclass { 
fill: #000000; 
} 

element1.white .svg-pathclass { 
fill: #ffffff; 
} 

oczywiście ten zakłada ścieżki w SVG posiadające klasy .svg -pathclass

jest to możliwe?

Answer 1

Nie, nie jest to możliwe. SVG musi być przygotowany w jednym dokumencie (może to być plik data URI lub plik zewnętrzny) i , a następnie jako tło w innym pliku.

Answer 2

Można użyć SVG i CSS maski, aby odtworzyć ten efekt, a następnie użyć normalny CSS projektować wnętrza SVG nawet background-image

-webkit-mask: url(filename.svg) 50% 50%/100px 50px no-repeat; 
    -o-mask: url(filename.svg) 50% 50%/100px 50px no-repeat; 
    -ms-mask: url(filename.svg) 50% 50%/100px 50px no-repeat; 

background-color: red; 
background-image: url(animated.gif); 

/* Filename, Position/Size, Repeat */ 
/* Modernizr.cssmask is the test needed to pass - snippet below */ 

Można to wykorzystać do tworzenia cieni poprzez nadanie element do DOM i stylizacja, która przy niższym indeksie Z i ustawieniu krycia.

Nadzieję, że pomaga!

Edit: Linki

• modernizr Test - http://pastebin.com/w4eVbEKr
• Niektóre więcej informacji - https://www.webkit.org/blog/181/css-masks/

Answer 3

To rzeczywiście możliwe dla tych, którzy mogą korzystać preprocesory w produkcji, przez "inline" background SVG, i kawałek SASS mixins, który "wycina" cały bełkot svg, aby uzyskać dostęp do części, którymi chcesz manipulować przez SASS variables.

W oryginalnym scenariuszu masz element
<div class="element1"></div>,

więc trzeba mixin/function które inline SVG dla Ciebie.Powiedzmy, że chcesz sterować z fill tak:

@mixin inline-svg($color, $svg-content) { 
    $start: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><style>path { fill:#{$color}; }</style>'; 
    $end: '</svg>'; 

    background-image: url('data:image/svg+xml;utf8, #{$start}#{$svg-content}#{$end}'); 
} 

gdzie $svg-content zmienna jest Twój <svg> rzeczy bez <style> element (którego chcesz uzyskać dostęp z wnętrza mixin) i owijania svg tag ,, tj: $svg-content = "<path .... />"

To po prostu trzeba być dołączone wartości przekazywane wewnątrz:
@include inline-svg(salmon, $svg-content);

Podsumowując whol e rzeczą w górę, jest to przykład Sass kod:

$svg-content = "<path .... />" 

@mixin inline-svg($color, $svg-content) { 
    $start: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><style>path { fill:#{$color}; }</style>'; 
    $end: '</svg>'; 

    background-image: url('data:image/svg+xml;utf8, #{$start}#{$svg-content}#{$end}'); 
} 

.element1 { 
    @include inline-svg(rgba(0,0,0,0.6), $svg-content); 
} 

myślę tutaj możliwości są dość duże (istnieją również ograniczenia tutaj do tego podejścia). I rzeczywiście przekazać SASS map do moich mixin z css stylów zdefiniowanych jako key, value pary, aby wstrzyknąć całą masę css stylów do <style> części svg.

Jest to technicznie możliwe, ale wymaga większej złożoności, ale gdy już to zrobisz, uzyskasz korzyści z ponownego wykorzystania tego mixin w swoim projekcie (projektach), co jest fajne.