Issue
I'm trying to make a path element in SVG icon inherit fill property from the parent.
When I try set : SVG path { fill: inherit} in CSS it not inherit it but choose his inner fill property. But I don't want delete his inner fill attribute because icon become black and I need set color for every icon. Is there is something wrong I do?
.contact__email-image {
fill: red;
path {
all: inherit;
}
&:hover {
fill: green;
}
}
<svg fill="none" viewBox="0 0 16 12" id="mail-black-envelope-symbol" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.953.252L8 6.336 1.047.252C1.332.096 1.653 0 2 0h12c.347 0 .668.096.953.252zm.79 10.71c.158-.286.257-.611.257-.962V2c0-.391-.117-.754-.312-1.062L10.691 5.31l5.052 5.652zM9.94 5.968l-1.61 1.409a.5.5 0 01-.658 0l-1.61-1.41-5.116 5.725c.307.193.666.308 1.055.308h12c.389 0 .748-.115 1.055-.308L9.939 5.968zM0 2c0-.392.117-.754.312-1.062l4.996 4.37-5.051 5.654A1.976 1.976 0 010 10V2z" fill="#87B0EE"/>
</svg>
my html:
<svg class="contact__email-image" viewBox="0 0 16 12" width="16" height="12"> <use xlink:href="img/icons/icons.svg#mail-black-envelope-symbol"></use> </svg>
Solution
What you want to do won't work because the selector cannot cross the shadow DOM. Rely on CSS variables to overcome this. Notice how I am defining the fill
of the path using a variable with a fallback
.contact__email-image {
--color: red;
}
.contact__email-image:hover {
--color: green;
}
<svg class="contact__email-image" viewBox="0 0 16 12" width="40"> <use xlink:href="#mail-black-envelope-symbol"></use> </svg>
<svg viewBox="0 0 16 12" width="40"> <use xlink:href="#mail-black-envelope-symbol"></use> </svg>
<svg fill="none" viewBox="0 0 16 12" id="mail-black-envelope-symbol" xmlns="http://www.w3.org/2000/svg" style="width: 0">
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.953.252L8 6.336 1.047.252C1.332.096 1.653 0 2 0h12c.347 0 .668.096.953.252zm.79 10.71c.158-.286.257-.611.257-.962V2c0-.391-.117-.754-.312-1.062L10.691 5.31l5.052 5.652zM9.94 5.968l-1.61 1.409a.5.5 0 01-.658 0l-1.61-1.41-5.116 5.725c.307.193.666.308 1.055.308h12c.389 0 .748-.115 1.055-.308L9.939 5.968zM0 2c0-.392.117-.754.312-1.062l4.996 4.37-5.051 5.654A1.976 1.976 0 010 10V2z" style="fill:var(--color,#87B0EE)"/>
</svg>
Answered By - Temani Afif
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.