选择器不适用于 <svg> > <path>

Question

我正在开发一个使用一些 SVG 图标的项目，我不希望这些图标使用选择器设置样式。

我无法使用选择器在 <svg> 中设置 <path> 的样式。

在附加的代码段中 .ribbon-color 这是可行的。但我想在一页上使用多种颜色。所以，.yellow-ribbon .ribbon-color 这是行不通的。

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

Answer 1

你不能那样做。考虑 CSS 个变量

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

选择器不适用于 <svg> > <path>

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

html

css

svg