Корень тени? Вызов цвета обводки - PullRequest
Новая
       50

Корень тени? Вызов цвета обводки

0 голосов
/ 24 мая 2019

Я вызываю удар в SVG, он работает, если я не ставлю классы на стиль.Но мне нужно поместить его туда, потому что конечному пользователю нужно было исправить его, выбрав любой цвет, который он хочет. 

symbol#icon-arrow{
  stroke: #ff6600;
  } /*this is working*/
  
 
 .icon-orange symbol#icon-arrow{
  stroke: #99CA3D;
  } /*this is not working, but this is what I need*/
  
  
<div id="icon-load" style="display:none;"></div>
              <svg xmlns="http://www.w3.org/2000/svg" width="0" height="0">
                  <symbol id="icon-arrow" viewBox="0 0 24 24" fill="none" stroke="#000000" stroke-width="3" stroke-linecap="square" stroke-linejoin="arcs" >
                      <path class="arrow" d="M12 19V6M5 12l7-7 7 7"/>
                  </symbol>
              </svg>
              
              

              <a href="#" class="icon">
                  <svg class="icon icon-orange"><use xlink:href="#icon-arrow"></use></svg>
              </a>

Ответы [ 2 ]

1 голос
/ 24 мая 2019

Как сказал @enxaneta, вы должны стилизовать элемент <use> и позволить цвету просачиваться вниз к символу.

Но сначала вам нужно удалить атрибут stroke из символа,В противном случае этот атрибут представления переопределит цвет, который вы хотите, чтобы он унаследовал. 

.icon-orange use {
  stroke: #ff6600;
}
  
.icon-green use {
  stroke: #99CA3D;
}
<div id="icon-load" style="display:none;"></div>

<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0">
    <symbol id="icon-arrow" viewBox="0 0 24 24" fill="none" stroke-width="3" stroke-linecap="square" stroke-linejoin="arcs" >
        <path class="arrow" d="M12 19V6M5 12l7-7 7 7"/>
    </symbol>
</svg>
              
<a href="#" class="icon">
    <svg class="icon icon-orange"><use xlink:href="#icon-arrow"></use></svg>
</a>

<a href="#" class="icon">
    <svg class="icon icon-green"><use xlink:href="#icon-arrow"></use></svg>
</a>
0 голосов
/ 24 мая 2019

Внутри .icon-orange есть элемент <use>.Вы должны стилизовать использование элемента.Однако, если вам нужно сослаться на значок # стрелка, вот как вы можете это сделать: 

 /*declare the namespace xlink*/
 @namespace xlink "http://www.w3.org/1999/xlink";
 /*style the use element inside the icon-orange whose's xlink:herf attribute is  the icon arrow*/
 .icon-orange use[xlink|href ="#icon-arrow" ]{
  stroke: #99CA3D;
  }
<div id="icon-load" style="display:none;"></div>
              <svg xmlns="http://www.w3.org/2000/svg" width="0" height="0">
                  <symbol id="icon-arrow" viewBox="0 0 24 24" fill="none"  stroke-width="3" stroke-linecap="square" stroke-linejoin="arcs" >
                      <path class="arrow" d="M12 19V6M5 12l7-7 7 7"/>
                  </symbol>
              </svg>
              
              

              <a href="#" class="icon">
                  <svg class="icon icon-orange"><use xlink:href="#icon-arrow" width="24" height="24"></use></svg>
              </a>
...