如何更改此SVG的颜色？

Question

我正在尝试使用CSS更改此SVG图标的颜色：

<symbol id="meetings">
  <svg viewBox="9 0 33 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(10.000000, 0.000000)">
          <polygon id="Fill-1" points="0.484430769 31.5076923 31.9921231 31.5076923 31.9921231 0 0.484430769 0"></polygon>
          <g id="Group-4" transform="translate(0.000000, 5.907692)">
              <path d="M4.92209231,11.8248862 C4.31409231,11.8248862 2.46006154,10.3154708 2.46006154,6.70390154 C2.46006154,2.47251692 4.8896,0.00704 7.79470769,0.00704 C9.18498462,0.00704 9.83926154,0.0715323077 10.5846154,0.745993846 C12.7123692,0.745993846 14.7702154,2.32433231 14.7702154,6.70390154 C14.7702154,10.2869169 12.9353846,11.8248862 12.3081846,11.8248862 C12.0900923,11.8248862 11.9241846,11.6338708 11.6795077,11.3847631 C11.4304,11.6328862 11.1547077,11.8539323 10.8583385,12.0439631 C10.9883077,13.9743015 11.7257846,14.7536246 13.8594462,15.5452554 C16.0896,16.3728246 17.1037538,16.9429169 17.2332308,19.1730708 C17.2494769,19.4477785 17.0402462,19.6831015 16.7655385,19.6993477 C16.7566769,19.69984 16.7483077,19.69984 16.7394462,19.69984 L0.494769231,19.69984 C0.219569231,19.6983631 -0.00147692308,19.4738708 2.03980422e-13,19.1991631 C2.03980422e-13,19.1903015 0.000492307693,19.1819323 0.000984615385,19.1730708 C0.130953846,16.9429169 1.14461538,16.3728246 3.37526154,15.5452554 C5.50793846,14.7541169 6.24541538,13.9747938 6.37538462,12.0464246 C6.07606154,11.8549169 5.79790769,11.6319015 5.54633846,11.3808246 C5.29969231,11.6314092 5.13476923,11.8248862 4.92209231,11.8248862 M31.0129231,19.69984 L18.6973538,19.6983631 C18.4369231,19.6993477 18.2212923,19.4960246 18.2070154,19.2355938 C18.2178462,18.26624 17.9244308,17.3180554 17.3671385,16.5244554 C17.1515077,16.2615631 17.1899077,15.8736246 17.4532923,15.6579938 C17.5035077,15.61664 17.5606154,15.5831631 17.6216615,15.5600246 L17.6605538,15.5452554 C19.7971692,14.7516554 20.5326769,13.9703631 20.6596923,12.0301785 C20.2904615,11.7933785 19.9571692,11.5053785 19.6696615,11.1745477 C19.1537231,10.5055015 18.8292923,9.70944 18.7308308,8.87054769 C18.7067077,8.87300923 18.6825846,8.87497846 18.6589538,8.87497846 C18.1243077,8.87497846 17.7196308,7.74759385 17.7196308,6.95497846 C17.7196308,6.16236308 17.9943385,5.92113231 18.2562462,5.92113231 C18.3108923,5.92113231 18.3616,5.92408615 18.4108308,5.92802462 C18.2872615,5.43030154 18.2217846,4.92027077 18.2153846,4.40777846 C18.2153846,2.48580923 18.7544615,1.15559385 20.4007385,0.918793846 C21.312,0.286670769 22.6894769,0.00753230769 24.4494769,0.00753230769 C25.5748923,0.00753230769 24.6370462,0.777501538 25.6950154,1.00248615 C26.3497846,1.14180923 27.5687385,1.60556308 27.5687385,4.40777846 C27.5623385,4.92027077 27.4968615,5.43030154 27.3732923,5.92802462 C27.4220308,5.92408615 27.4732308,5.92113231 27.5278769,5.92113231 C27.7902769,5.92113231 28.0644923,6.16236308 28.0644923,6.95497846 C28.0644923,7.74759385 27.6603077,8.87497846 27.1256615,8.87497846 C27.1015385,8.87497846 27.0774154,8.87300923 27.0532923,8.87054769 C26.9548308,9.70944 26.6304,10.5055015 26.1144615,11.1745477 C25.8299077,11.5019323 25.5005538,11.7874708 25.1357538,12.0227938 C25.2612923,13.9688862 25.9958154,14.7511631 28.1353846,15.5452554 C30.3635692,16.3728246 31.3767385,16.9429169 31.5062154,19.1730708 C31.5224615,19.4472862 31.3137231,19.6831015 31.0395077,19.6993477 C31.0306462,19.69984 31.0217846,19.69984 31.0129231,19.69984" id="Fill-2"></path>
          </g>
      </g>
  </svg>

​

我在HTML中使用SVG，如下所示：

<svg class="active" width="32px" height="32px">
    <use xlink:href="#meetings"/></use>
</svg>

下面是CSS (使用SASS)：

.foot__icon svg.active {
  fill: #ffffff !important;

  path, g, #Group-4 {
    fill: #ffffff !important;
  }
}

这不管用，我也不知道为什么。当我试图从SVG标记(fill="#03A9F4")中删除填充声明时，g完全消失了。

活动类甚至显示在dev工具中，但颜色不会显示为白色。

​

更新:这似乎是<use>标签的一个问题。如果我将类直接放在SVG上，那么它就会按预期工作。还是不知道这是怎么回事。

Answer 1

当您通过<use>引用某些内容时，被引用的元素不会突然成为<use>元素下的DOM的一部分。换句话说，DOM仍然是这样的

<symbol id="meetings">
   <path>
<svg class="active">
   <use>

不

<svg class="active">
   <use>
      <symbol id="meetings">
         <path>

因此，像svg.active path这样的CSS规则将不起作用。

符号是指元素的静态副本，或重用的元素集。如果要设置样式，则应设置原始元件的样式。例如：

#Group-4 {
  fill: #ffffff;
}

如果你想动态地设置符号的样式，那么只有一个有限的解决方案可以使用。SVG颜色有一个名为currentColor的特殊关键字值，它允许您将color的当前值用于填充或描边。

这个“技巧”允许我们将一种颜色传递到符号中。在下面的例子中，我用它来给符号中的路径上色。

​

#Group-4 {
  fill: currentColor;
}

svg.active {
  color: red;
}

svg.inactive {
  color: lightgrey;
}

<svg width="0" height="0">
   <symbol id="meetings" viewBox="9 0 33 32">
      <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(10.000000, 0.000000)">
          <polygon id="Fill-1" points="0.484430769 31.5076923 31.9921231 31.5076923 31.9921231 0 0.484430769 0"></polygon>
          <g id="Group-4" transform="translate(0.000000, 5.907692)">
              <path d="M4.92209231,11.8248862 C4.31409231,11.8248862 2.46006154,10.3154708 2.46006154,6.70390154 C2.46006154,2.47251692 4.8896,0.00704 7.79470769,0.00704 C9.18498462,0.00704 9.83926154,0.0715323077 10.5846154,0.745993846 C12.7123692,0.745993846 14.7702154,2.32433231 14.7702154,6.70390154 C14.7702154,10.2869169 12.9353846,11.8248862 12.3081846,11.8248862 C12.0900923,11.8248862 11.9241846,11.6338708 11.6795077,11.3847631 C11.4304,11.6328862 11.1547077,11.8539323 10.8583385,12.0439631 C10.9883077,13.9743015 11.7257846,14.7536246 13.8594462,15.5452554 C16.0896,16.3728246 17.1037538,16.9429169 17.2332308,19.1730708 C17.2494769,19.4477785 17.0402462,19.6831015 16.7655385,19.6993477 C16.7566769,19.69984 16.7483077,19.69984 16.7394462,19.69984 L0.494769231,19.69984 C0.219569231,19.6983631 -0.00147692308,19.4738708 2.03980422e-13,19.1991631 C2.03980422e-13,19.1903015 0.000492307693,19.1819323 0.000984615385,19.1730708 C0.130953846,16.9429169 1.14461538,16.3728246 3.37526154,15.5452554 C5.50793846,14.7541169 6.24541538,13.9747938 6.37538462,12.0464246 C6.07606154,11.8549169 5.79790769,11.6319015 5.54633846,11.3808246 C5.29969231,11.6314092 5.13476923,11.8248862 4.92209231,11.8248862 M31.0129231,19.69984 L18.6973538,19.6983631 C18.4369231,19.6993477 18.2212923,19.4960246 18.2070154,19.2355938 C18.2178462,18.26624 17.9244308,17.3180554 17.3671385,16.5244554 C17.1515077,16.2615631 17.1899077,15.8736246 17.4532923,15.6579938 C17.5035077,15.61664 17.5606154,15.5831631 17.6216615,15.5600246 L17.6605538,15.5452554 C19.7971692,14.7516554 20.5326769,13.9703631 20.6596923,12.0301785 C20.2904615,11.7933785 19.9571692,11.5053785 19.6696615,11.1745477 C19.1537231,10.5055015 18.8292923,9.70944 18.7308308,8.87054769 C18.7067077,8.87300923 18.6825846,8.87497846 18.6589538,8.87497846 C18.1243077,8.87497846 17.7196308,7.74759385 17.7196308,6.95497846 C17.7196308,6.16236308 17.9943385,5.92113231 18.2562462,5.92113231 C18.3108923,5.92113231 18.3616,5.92408615 18.4108308,5.92802462 C18.2872615,5.43030154 18.2217846,4.92027077 18.2153846,4.40777846 C18.2153846,2.48580923 18.7544615,1.15559385 20.4007385,0.918793846 C21.312,0.286670769 22.6894769,0.00753230769 24.4494769,0.00753230769 C25.5748923,0.00753230769 24.6370462,0.777501538 25.6950154,1.00248615 C26.3497846,1.14180923 27.5687385,1.60556308 27.5687385,4.40777846 C27.5623385,4.92027077 27.4968615,5.43030154 27.3732923,5.92802462 C27.4220308,5.92408615 27.4732308,5.92113231 27.5278769,5.92113231 C27.7902769,5.92113231 28.0644923,6.16236308 28.0644923,6.95497846 C28.0644923,7.74759385 27.6603077,8.87497846 27.1256615,8.87497846 C27.1015385,8.87497846 27.0774154,8.87300923 27.0532923,8.87054769 C26.9548308,9.70944 26.6304,10.5055015 26.1144615,11.1745477 C25.8299077,11.5019323 25.5005538,11.7874708 25.1357538,12.0227938 C25.2612923,13.9688862 25.9958154,14.7511631 28.1353846,15.5452554 C30.3635692,16.3728246 31.3767385,16.9429169 31.5062154,19.1730708 C31.5224615,19.4472862 31.3137231,19.6831015 31.0395077,19.6993477 C31.0306462,19.69984 31.0217846,19.69984 31.0129231,19.69984" id="Fill-2"></path>
          </g>
      </g>
   </symbol>
</svg>







<svg class="active" width="32px" height="32px">
    <use xlink:href="#meetings"/>
</svg>

<svg class="inactive" width="32px" height="32px">
    <use xlink:href="#meetings"/>
</svg>

​

因此，我们将符号的路径设置为fill: currentColor，然后将svg.active的color设置为red。红色被传递到符号中并用于路径。

为了证明它是动态的，我添加了另一个对符号的引用，带有"inactive“类，并使其具有不同的颜色。