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

Question

¿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 las 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 seudo CSS me gustaría hacer lo siguiente para variar el color de forma sencilla basada en la clase del elemento padre:

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 clase SVG tener -pathclass

¿Esto es posible?

Answer 1

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

Answer 2

Puede utilizar SVG y CSS máscaras para recrear este efecto, entonces el uso normal CSS de peinar el interior de la 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 utilizar esto para crear sombras añadiendo un element a el DOM y el estilo que, con un índice Z más bajo y el establecimiento de una opacidad.

Espero que ayude!

Editar: Enlaces

• prueba Modernizr - http://pastebin.com/w4eVbEKr
• Algunos más información - https://www.webkit.org/blog/181/css-masks/

Answer 3

Es realmente posible para aquellos que pueden usar pre-procesadores en la producción, por "inline" fondo SVG, y un poco de SASS mixins, que "cortan" todo el galimatías svg, para acceder a las partes que desea manipular a través del SASS variables.

En su escenario original que tienen un elemento
<div class="element1"></div>,

lo que necesita un mixin/function que inline SVG para usted.Digamos que usted quiere controlar de la fill, por lo que:

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

donde $svg-content variable es su <svg> cosas excluyendo <style> elemento (la que desea acceder desde el interior de la mixin) y envolviendo svg etiqueta ,, es decir: $svg-content = "<path .... />"

Esto sólo tiene que incluirse con valores pasados ​​en el interior:
@include inline-svg(salmon, $svg-content);

en resumen whol e cosa, este es un ejemplo SASS código:

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

Creo posibilidades aquí son bastante grandes (también existen limitaciones para que el enfoque). De hecho, me paso un SASS map a mis mixin con css estilos definidos como key, value par, para inyectar toda montón de estilos css a la parte de <style>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 este mixin en todos sus proyectos, lo cual es genial.