Question

我正在尝试更改SVG符号在<use>元素内时的填充颜色。由于页面上将存在该符号的多个实例，因此我无法使用<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

问题是fill="#000" svg中的path。删除该颜色或将其更改为所需的颜色。

#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>不变颜色

1 个答案: