Especifique un SVG como una imagen de fondo y TAMBIÉN modele el SVG en CSS?

¿Es posible especificar un SVG como imagen de fondo y TAMBIÉN modelar el SVG en el mismo archivo CSS?

Me siento muy cómodo colocando, escalando y recortando imágenes SVG como archivos individuales o sprites, pero no he podido determinar si es posible darle un estilo al SVG dentro del mismo archivo CSS que lo establece como imagen de fondo.

En pseudo CSS, me gustaría hacer lo siguiente para variar el color de la forma simple en función de la clase del elemento principal:

element1 { background-image(icon.svg); } element1.black .svg-pathclass { fill: #000000; } element1.white .svg-pathclass { fill: #ffffff; } 

obviamente, esto supone un camino en el SVG que tiene la clase .svg-pathclass

¿es posible?

No, esto no es posible El SVG debe prepararse en un documento (que puede ser un URI de datos o un archivo de referencia externa) y luego utilizarse como fondo en otro archivo.

Puede usar máscaras de SVG y CSS para recrear este efecto, luego use CSS normal para diseñar el interior del SVG , incluso 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 */ 

Puede usar esto para crear sombras paralelas al agregar un element al DOM y diseñarlo, con un índice z más bajo y configurando una opacidad.

¡Espero que ayude!

Editar: Enlaces

En realidad, es posible para aquellos que pueden usar preprocesadores en producción, al “enlining” SVG de fondo y un poco de mixins SASS, que “cortan” todo el galimatías svg , para acceder a las partes que quieren manipular a través de SASS variables .

En tu escenario original tienes un elemento

,

entonces necesitas una mixin/function que alinee SVG para ti. Digamos que quieres controlar el fill , entonces:

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

donde la variable $svg-content es tu elemento excluye el elemento

(al que deseas acceder desde el interior de la mixin ) y que envuelve la etiqueta svg ,, es decir: $svg-content = ""

Esto solo necesita ser incluido con los valores pasados ​​dentro:
@include inline-svg(salmon, $svg-content);

Para resumir todo, este es un ejemplo de código SASS :

 $svg-content = "" @mixin inline-svg($color, $svg-content) { $start: ''; $end: ''; background-image: url('data:image/svg+xml;utf8, #{$start}#{$svg-content}#{$end}'); } .element1 { @include inline-svg(rgba(0,0,0,0.6), $svg-content); } 

Creo que las posibilidades aquí son bastante grandes (también hay limitaciones aquí para ese enfoque). De hecho paso un SASS map a mi mixin con estilos css definidos como key , par de value , para inyectar un montón de estilos css a la parte

de svg .

Por lo tanto, es técnicamente posible, pero requiere más competencia, pero una vez que lo haya hecho, obtendrá los beneficios de reutilizar esta mixin en sus proyectos, lo cual es genial.