Цвет заливки на <use>элементе для <symbol>не меняет цвет - PullRequest
Новая
       17

Цвет заливки на <use>элементе для <symbol>не меняет цвет

0 голосов
/ 06 сентября 2018

Я пытаюсь изменить цвет заливки символа 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>

1 Ответ

0 голосов
/ 06 сентября 2018

Проблема в 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>
...