<use> 元素的填充颜色 <symbol> 不会改变颜色

Question

我正在尝试更改位于 <use> 元素内的 SVG 符号的填充颜色。因为页面上会有多个符号实例，所以我不能这样做是 <symbol> 元素，因为 <use> 的不同实例将有不同的颜色。

虽然我似乎无法让它工作。在下面的示例中，我希望底部实例是一个蓝色的 Twitter 图标。

在 CSS 中，我已经完成了 #bottom-twitter svg path {fill:blue;}，但没有用。而且我似乎什么也做不了。

任何帮助都会很棒。

#box1 {
  height: 5rem;
  width: 5rem;
}

/* NOT WORKING */
#bottom-twitter svg path {
  fill:blue;
}

<svg id="twitter" style="display: none;">
    <defs>
      <symbol id="twitter-symbol" viewBox="0 0 19.19 15.95">
        <path id="twitter-path" d="M19.19,1.92a8.76,8.76,0,0,1-2.28.64A3.9,3.9,0,0,0,18.63.32a6.87,6.87,0,0,1-2.52,1A3.87,3.87,0,0,0,13.23,0,4,4,0,0,0,9.32,4,3.41,3.41,0,0,0,9.44,5,11,11,0,0,1,1.32.72a4.29,4.29,0,0,0-.52,2A4,4,0,0,0,2.56,6.12,3.61,3.61,0,0,1,.76,5.6v0a4,4,0,0,0,3.16,4,4.35,4.35,0,0,1-1,.16,4.9,4.9,0,0,1-.76-.08,4,4,0,0,0,3.68,2.8A7.79,7.79,0,0,1,.92,14.19a6.78,6.78,0,0,1-.92,0A10.83,10.83,0,0,0,6,16c7.24,0,11.19-6.16,11.19-11.47V4a6.83,6.83,0,0,0,2-2">
        </path>
      </symbol>
   </defs>
</svg>


<div class="box" id="box1">
  
  <svg id="top-twitter" viewBox="0 0 19.19 15.95">
    <use xlink:href="#twitter-symbol"/>
  </svg>
  
  <svg id="bottom-twitter" viewBox="0 0 19.19 15.95">
    <use xlink:href="#twitter-symbol"/>
  </svg>

</div>

Answer 1

问题出在 svg path 中的 fill="#000"。删除它或将其更改为您想要的颜色。

#box1 {
  height: 5rem;
  width: 5rem;
}

/* NOT WORKING */
#bottom-twitter {
  fill: blue;
}

<svg id="twitter" style="display: none;">
    <defs>
      <symbol id="twitter-symbol" viewBox="0 0 19.19 15.95">
        <path id="twitter-path" d="M19.19,1.92a8.76,8.76,0,0,1-2.28.64A3.9,3.9,0,0,0,18.63.32a6.87,6.87,0,0,1-2.52,1A3.87,3.87,0,0,0,13.23,0,4,4,0,0,0,9.32,4,3.41,3.41,0,0,0,9.44,5,11,11,0,0,1,1.32.72a4.29,4.29,0,0,0-.52,2A4,4,0,0,0,2.56,6.12,3.61,3.61,0,0,1,.76,5.6v0a4,4,0,0,0,3.16,4,4.35,4.35,0,0,1-1,.16,4.9,4.9,0,0,1-.76-.08,4,4,0,0,0,3.68,2.8A7.79,7.79,0,0,1,.92,14.19a6.78,6.78,0,0,1-.92,0A10.83,10.83,0,0,0,6,16c7.24,0,11.19-6.16,11.19-11.47V4a6.83,6.83,0,0,0,2-2" >
        </path>
      </symbol>
   </defs>
</svg>


<div class="box" id="box1">
  
  <svg id="top-twitter" viewBox="0 0 19.19 15.95">
    <use xlink:href="#twitter-symbol"/>
  </svg>
  
  <svg id="bottom-twitter" viewBox="0 0 19.19 15.95">
    <use xlink:href="#twitter-symbol"/>
  </svg>

</div>

<use> 元素的填充颜色 <symbol> 不会改变颜色

Fill Colour on <use> Element For a <symbol> Isn't Changing Colour

css

svg

symbols