¿Cómo modificar el color de relleno de una imagen SVG cuando se sirve como imagen de fondo?
Al colocar la salida SVG directamente en línea con el código de la página, puedo simplemente modificar los colores de relleno con CSS de esta manera:
polygon.mystar {
fill: blue;
}
circle.mycircle {
fill: green;
}
Esto funciona muy bien, sin embargo, estoy buscando una manera de modificar el atributo "relleno" de un SVG cuando se sirve como IMAGEN DE FONDO.
html {
background-image: url(../img/bg.svg);
}
¿Cómo puedo cambiar los colores ahora? ¿Es siquiera posible?
Como referencia, aquí está el contenido de mi archivo SVG externo:
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="320px" height="100px" viewBox="0 0 320 100" enable-background="new 0 0 320 100" xml:space="preserve">
<polygon class="mystar" fill="#3CB54A" points="134.973,14.204 143.295,31.066 161.903,33.77 148.438,46.896 151.617,65.43 134.973,56.679
118.329,65.43 121.507,46.896 108.042,33.77 126.65,31.066 "/>
<circle class="mycircle" fill="#ED1F24" cx="202.028" cy="58.342" r="12.26"/>
</svg>
Puedes usar máscaras CSS. Con la propiedad 'máscara', creas una máscara que se aplica a un elemento.
.icon {
background-color: red;
-webkit-mask-image: url(icon.svg);
mask-image: url(icon.svg);
}
Para obtener más información, consulte este excelente artículo: https://codepen.io/noahblon/post/coloring-svgs-in-css-background-images
Necesitaba algo similar y quería seguir con CSS. Aquí hay mixins LESS y SCSS, así como CSS simple que pueden ayudarlo con esto. Desafortunadamente, la compatibilidad con el navegador es un poco laxa. Consulte a continuación para obtener detalles sobre la compatibilidad del navegador.
MENOS mezcla:
.element-color(@color) {
background-image: url('data:image/svg+xml;utf8,<svg ...><g stroke="@{color}" ... /></g></svg>');
}
MENOS uso:
.element-color(#fff);
Mezcla SCSS:
@mixin element-color($color) {
background-image: url('data:image/svg+xml;utf8,<svg ...><g stroke="#{$color}" ... /></g></svg>');
}
Uso de SCSS:
@include element-color(#fff);
CSS:
// color: red
background-image: url('data:image/svg+xml;utf8,<svg ...><g stroke="red" ... /></g></svg>');
Aquí hay más información sobre cómo incrustar el código SVG completo en su archivo CSS. También mencionó la compatibilidad del navegador, que es demasiado pequeña para que sea una opción viable.
Una forma de hacer esto es servir su svg desde algún mecanismo del lado del servidor. Simplemente cree un lado del servidor de recursos que genere su svg de acuerdo con los parámetros GET y lo entregará en una URL determinada.
Entonces simplemente usa esa URL en tu CSS.
Porque como imagen de fondo, no es parte del DOM y no puedes manipularla. Otra posibilidad sería usarlo regularmente, incrustarlo en una página de manera normal, pero posicionarlo absolutamente, hacerlo en todo el ancho y alto de una página y luego usar la propiedad css z-index para colocarlo detrás de todos los demás elementos DOM. en una página.
Otro enfoque más es utilizar una máscara. Luego cambia el color de fondo del elemento enmascarado. Esto tiene el mismo efecto que cambiar el atributo de relleno del svg.
HTML:
<glyph class="star"/>
<glyph class="heart" />
<glyph class="heart" style="background-color: green"/>
<glyph class="heart" style="background-color: blue"/>
CSS:
glyph {
display: inline-block;
width: 24px;
height: 24px;
}
glyph.star {
-webkit-mask: url(star.svg) no-repeat 100% 100%;
mask: url(star.svg) no-repeat 100% 100%;
-webkit-mask-size: cover;
mask-size: cover;
background-color: yellow;
}
glyph.heart {
-webkit-mask: url(heart.svg) no-repeat 100% 100%;
mask: url(heart.svg) no-repeat 100% 100%;
-webkit-mask-size: cover;
mask-size: cover;
background-color: red;
}
Encontrará un tutorial completo aquí: http://codepen.io/noahblon/blog/coloring-svgs-in-css-background-images (no es mío). Propone una variedad de enfoques (no limitados a la máscara).
Utilice el filtro sepia junto con la rotación de tono, el brillo y la saturación para crear el color que queramos.
.colorize-pink {
filter: brightness(0.5) sepia(1) hue-rotate(-70deg) saturate(5);
}
https://css-tricks.com/solved-with-css-colorizing-svg-backgrounds/
