Selector is not working for <svg> > <path>

March 17, 2022

I’m working on a project that uses some SVG icons that I’d like to not be able to style with selector.

I am unable to styling of <path> in <svg> using selector.

In attached snippet .ribbon-color This is working. But I want multiple color on a page. So, .yellow-ribbon .ribbon-color this is not working.

<!DOCTYPE html>
<html>

<head>
  <title></title>


  <style>
    .svg-block {
      width: 0px;
      height: 0px;
      overflow: hidden;
    }

 /*This is working*/
    .ribbon-color {
      fill: red;
    }

 /*This is Not working*/
    .yellow-ribbon .ribbon-color {
      fill: yellow;
    }
  </style>

  <script>

  </script>
</head>

<body>

  <div class="svg-block">
    <svg xmlns="http://www.w3.org/2000/svg">

      <g id="ribbon-Color" width="55.425" height="71.707" viewBox="0 0 55.425 71.707">
        <g id="Group_10971" data-name="Group 10971" transform="translate(-340.947 -751.995)">
          <path class="ribbon-color" id="Path_1970" data-name="Path 1970" d="M-17661.223-23233v5.037h4.4l-2.02-2.312Z"
            transform="translate(18002.17 23984.998)" />
          <path class="ribbon-color" id="Path_1971" data-name="Path 1971" d="M-17661.223-23233v6.512h4.346l-2-2.988Z"
            transform="translate(18053.248 24050.188)" />
          <path class="ribbon-color" id="Subtraction_8" data-name="Subtraction 8"
            d="M55.425,71.7l0,0L0,0H33L55.425,29.006V71.7Z" transform="translate(340.947 751.998)" />
        </g>
      </g>




    </svg>
  </div>


  <div class="red-ribbon"> <svg width="55.425" height="71.707" viewBox="0 0 55.425 71.707">
      <use xlink:href="#ribbon-Color"></use>
    </svg> </div>

    
  <div class="yellow-ribbon"> <svg width="55.425" height="71.707" viewBox="0 0 55.425 71.707">
      <use xlink:href="#ribbon-Color"></use>
    </svg> </div>



</body>

</html>

>Solution :

You cannot do it that way. consider CSS variables

.svg-block {
  width: 0px;
  height: 0px;
  overflow: hidden;
}

.ribbon-color {
  fill: var(--c, red);
}

.yellow-ribbon {
  --c: yellow;
}

<div class="svg-block">
  <svg xmlns="http://www.w3.org/2000/svg">
      <g id="ribbon-Color" width="55.425" height="71.707" viewBox="0 0 55.425 71.707">
        <g id="Group_10971" data-name="Group 10971" transform="translate(-340.947 -751.995)">
          <path class="ribbon-color" id="Path_1970" data-name="Path 1970" d="M-17661.223-23233v5.037h4.4l-2.02-2.312Z"
            transform="translate(18002.17 23984.998)" />
          <path class="ribbon-color" id="Path_1971" data-name="Path 1971" d="M-17661.223-23233v6.512h4.346l-2-2.988Z"
            transform="translate(18053.248 24050.188)" />
          <path class="ribbon-color" id="Subtraction_8" data-name="Subtraction 8"
            d="M55.425,71.7l0,0L0,0H33L55.425,29.006V71.7Z" transform="translate(340.947 751.998)" />
        </g>
      </g>
    </svg>
</div>


<div class="red-ribbon"> <svg width="55.425" height="71.707" viewBox="0 0 55.425 71.707">
      <use xlink:href="#ribbon-Color"></use>
    </svg> </div>

<div class="yellow-ribbon"> <svg width="55.425" height="71.707" viewBox="0 0 55.425 71.707">
      <use xlink:href="#ribbon-Color"></use>
    </svg> </div>