Por fin después de mucho batallar ya dimos con el resultado de este rompecabezas que ciertos de nuestros usuarios de nuestro sitio web han presentado. Si deseas compartir algún detalle no dejes de dejar tu información.
Solución:
Bien, aquí vamos… Primero explicaré por qué no funciona y luego mostraré una alternativa.
Por qué su enfoque no funciona
En su ejemplo, el svg no es parte del DOM. Entonces no puedes usar css para modificar el attributes del svg.
Lo que está haciendo es agregar un estilo en línea al svg en su URL. Como el navegador no reconoce --primary-color como color no funciona.
Un enfoque alternativo
Un enfoque alternativo es poner el svg en el html y falsificar un fondo. Hice esto posicionando absolutamente el svg y moviéndolo al fondo con z-index.
Tenga en cuenta que tendrá que modificar el svg o el posicionamiento para colocar el fondo de la manera que desee. Normalmente usaría el tamaño de fondo para esto. Pero con un poco de esfuerzo puedes replicar este comportamiento dentro del svg o posicionarlo mejor usando css.
:root
--primary-color: hsl(332, 61%, 78%);
div
width: 100px;
height: 100px;
.test
background: var(--primary-color);
.icon /*postion relative for absolute positioning to work*/
position: relative;
.icon>svg
position: absolute;
top: 0px;
right: 0px;
left: 0px;
bottom: 0px;
z-index: -1;
.icon>svg>path /*target the image with css*/
fill: var(--primary-color);
Testing the css variable color
Text goes here...
No incluya svg como fondo, al hacerlo no tiene control sobre su relleno, en su lugar, intente agregarlo en línea en html y a través de css puede controlar el relleno a través de la variable css, consulte el ejemplo de trabajo a continuación, espero que ayude 🙂
:root
--primary-color: hsl(332, 61%, 78%);
div
width: 100px;
height: 100px;
.test
background: var(--primary-color);
.icon
color: var(--primary-color);
fill: currentColor;
width: 64px;
height: 64px;
Testing the css variable color
Ahora puede incluir SVG como imagen de máscara en lugar de fondo. No olvide establecer el color de fondo de las variables css para el bloque .icon.
.icon
background: var(--primary-color);
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 129 129'%3E%3Cpath d='m121.3,34.6c-1.6-1.6-4.2-1.6-5.8,0l-51,51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l53.9,53.9c0.8,0.8 1.8,1.2 2.9,1.2 1,0 2.1-0.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2 0.1-5.8z' /%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 129 129'%3E%3Cpath d='m121.3,34.6c-1.6-1.6-4.2-1.6-5.8,0l-51,51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l53.9,53.9c0.8,0.8 1.8,1.2 2.9,1.2 1,0 2.1-0.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2 0.1-5.8z' /%3E%3C/svg%3E");
Puedes comprobarlo en este CodePan
Aquí hay información de Caniuse sobre máscara-imagen
Y aquí la documentación sobre la propiedad de la máscara.