SVG-继承多种颜色/动画

我想做什么：

<symbol xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
        id="red5" x="0px" y="0px" viewBox="0 0 48.1 50.8">
  <style type="text/css">
    .st0{
      fill:#D73647;
      stroke:#000000;
      stroke-miterlimit:10;
     }

    /* use.active .color-a{
      fill: green;
    }
    use.active .color-b{
      fill: blue;
    }*/ // Not working...
  </style>
  <g>
    <path class="st0 color-a" d="M2.3,20.2L11.8,20.2C11.8,20.2 12.5,10.9 22.3,11.2C22.3,11.2 28.5,11.1 32.3,16L26.3,22.4L47.5,22.4L47.5,2.7L40.4,9C40.4,9 36.1,0.4 23.6,0.5C23.6,0.5 4.8,-0.2 2.3,20.2z">
    </path>
    <path class="st0 color-b" d="M45.8,30.6L36.3,30.6C36.3,30.6 35.6,39.9 25.8,39.6C25.8,39.6 19.6,39.7 15.8,34.8L21.8,28.4L0.5,28.4L0.5,48.1L7.7,41.7C7.7,41.7 12,50.3 24.5,50.2C24.5,50.3 43.3,51 45.8,30.6z">
    </path>
  </g>
</symbol>

<use id="svg_16" 
     xlink:href="#red5" transform="matrix(0.6730555893894703,0,0,0.7071457914654147,-239.09557391490307,-165.87702520953462) " 
     y="269.9999919533732" 
     x="473.99998587369964" 
     class="default-state" 
     fill="black"></use>

使用

元素复制图标，并在将特定类添加到

元素时为图标添加两种不同的颜色

图标：

<symbol xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
        id="red5" x="0px" y="0px" viewBox="0 0 48.1 50.8">
  <style type="text/css">
    .st0{
      fill:#D73647;
      stroke:#000000;
      stroke-miterlimit:10;
     }

    /* use.active .color-a{
      fill: green;
    }
    use.active .color-b{
      fill: blue;
    }*/ // Not working...
  </style>
  <g>
    <path class="st0 color-a" d="M2.3,20.2L11.8,20.2C11.8,20.2 12.5,10.9 22.3,11.2C22.3,11.2 28.5,11.1 32.3,16L26.3,22.4L47.5,22.4L47.5,2.7L40.4,9C40.4,9 36.1,0.4 23.6,0.5C23.6,0.5 4.8,-0.2 2.3,20.2z">
    </path>
    <path class="st0 color-b" d="M45.8,30.6L36.3,30.6C36.3,30.6 35.6,39.9 25.8,39.6C25.8,39.6 19.6,39.7 15.8,34.8L21.8,28.4L0.5,28.4L0.5,48.1L7.7,41.7C7.7,41.7 12,50.3 24.5,50.2C24.5,50.3 43.3,51 45.8,30.6z">
    </path>
  </g>
</symbol>

<use id="svg_16" 
     xlink:href="#red5" transform="matrix(0.6730555893894703,0,0,0.7071457914654147,-239.09557391490307,-165.87702520953462) " 
     y="269.9999919533732" 
     x="473.99998587369964" 
     class="default-state" 
     fill="black"></use>

以及与此相关的颜色类别：

.st0{
  fill: inherit; // <- changed
  stroke: #000000;
  stroke-miterlimit: 10;
}

use.active {
  fill: green;
}

但是当我将

类设置为“active”时，它们都会得到相同的颜色

我想为动画做同样的事情

---

我错过了什么？如何实现这一点？

我将这样做：我将创建一个符号，并重复使用两次相同的路径：一次按原样，一次旋转180度。对于“默认”状态，请删除

g

元素的

active

类

.st0{
行程限制：10；
}
.active.color-a{
填充：绿色；
}
.active.color-b{
填充：蓝色；
}
svg{宽度：90vh；边框：1px实心}

在我的例子中，我正在处理您在这里创建的所有SVG，并使用

引用它。当

处于活动状态时，我希望应用颜色。比如说，我有一个建筑图标，我希望在建筑处于活动状态时，用不同的颜色给每行窗口上色。你会怎么做？恐怕我不明白你的意思。在我的代码中有一个

元素，该元素带有一个类

.active

，如果您删除该类，您将获得默认状态。这将是另一个问题，我需要查看您的代码。我想我已经回答了这个问题。如果你喜欢我的回答，请接受。如果你需要问别的问题，请问另一个问题。我很乐意帮忙。