Why doesn't my path element inherit fill attribute that was set in CSS?-CodePudding

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 viewBox="0 0 16 12" width="16" height="12"> <use xlink:href="img/icons/icons.svg#mail-black-envelope-symbol"></use> </svg>

CodePudding user response：

First things first, your styles are using SASS / SCSS syntax (the style nesting and &:hover). If you are not using a pre-processor for your styles you need to write in normal CSS.

In CSS that would look like:

.contact__email-image {
  fill: red; 
}
.contact__email-image:hover {
  fill: green;
}
.contact__email-image path {
  fill: inherit; /*avoid using all unless you need it*/
}

Next you are using the class contact__email-image to style the SVG, but it is not present. You need to add inside the opening svg tag. I would replace the ID with it unless you are using it.

You also have some inline fill="" code on the SVG and the path, I would remove those since they may take priority over your styles if they are being loaded with an external stylesheet file.

CodePudding user response：

Is this effect you're going for? It defaults to red, then changes to green on hover.

.contact__email-image svg {
  fill: red; 
}
.contact__email-image svg:hover {
  fill: green;
}
.contact__email-image svg>path {
  fill: inherit;
}

<div >
  <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"/>
  </svg>
</div>

CodePudding user response：

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