Specificare un SVG come immagine di sfondo e ALSO come stile SVG in CSS?

Question

È possibile specificare un SVG come immagine di sfondo e ALSO impostare lo SVG nello stesso file CSS?

Mi piace molto posizionare, ridimensionare e ritagliare le immagini SVG come singoli file o sprite, ma non sono riuscito a capire se è possibile creare uno stile SVG all'interno dello stesso file CSS come lo imposta come immagine di sfondo.

In pseudo CSS vorrei fare quanto segue per variare il colore della forma semplice basato sulla classe dell'elemento principale:

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

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

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

ovviamente questo assume un percorso nella classe SVG avente .svg -percorso

è possibile?

Answer 1

No, questo non è possibile. L'SVG deve essere preparato in un documento (che può essere un data URI o un file di riferimento esterno) e quindi utilizzato come sfondo in un altro file.

Answer 2

È possibile utilizzare SVG e CSS maschere per ricreare questo effetto, quindi utilizzare il normale CSS per stile all'interno del SVG, anche 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 */ 

È possibile utilizzare questo per creare ombre aggiungendo un element a lo DOM e lo stile che, con uno z-index inferiore e impostando un'opacità.

Spero che questo aiuti!

Edit: Link

• Modernizr Test - http://pastebin.com/w4eVbEKr
• Qualche informazione in più - https://www.webkit.org/blog/181/css-masks/

Answer 3

In realtà è possibile per coloro che possono utilizzare preprocessori in produzione, da "inlining" background SVG, e bit di SASS mixins, che "taglia" tutto il testo svg senza senso, per ottenere l'accesso alle parti che si desidera manipolare tramite SASS variables.

nello scenario originale voi hanno un elemento
<div class="element1"></div>,

quindi è necessario un mixin/function che inline SVG per voi.Diciamo che si desidera controllare il fill, quindi:

@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}'); 
} 

dove $svg-content variabile è la tua roba <svg> escluso <style> elemento (che si desidera accedere dall'interno del mixin) e confezionamento svg tag ,, vale a dire: $svg-content = "<path .... />"

Questo solo bisogno di essere incluso con valori passati all'interno:
@include inline-svg(salmon, $svg-content);

per riassumere da t e cosa in su, questo è un esempio di codice SASS:

$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); 
} 

Penso possibilità qui sono abbastanza grandi (ci sono anche limitazioni qui per questo approccio). Io in realtà passo un SASS map ai miei mixin con css stili definiti come key, value coppia, per iniettare intero gruppo di css stili al <style> parte di svg.

Quindi è tecnicamente possibile, ma richiede più complicità, ma una volta completato, si otterrà il vantaggio di riutilizzare questo mixin in tutti i progetti, il che è fantastico.