时间戳

首页 > 解决方案 > 影根？调出描边颜色

svg - 影根？调出描边颜色

问题描述

我在 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>

标签： svgcolorsstroke

解决方案

正如@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>

推荐阅读