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

svg html5 examples

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 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?

Answer 1

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
<div class="element1"></div> ,

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

@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 la variable $svg-content es tu elemento <svg> excluye el elemento <style> (al que deseas acceder desde el interior de la mixin ) y que envuelve la etiqueta svg ,, es decir: $svg-content = "<path .... />"

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 = "<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 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 <style> 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.

Answer 2

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.

Answer 3

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

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