我正在用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>
答案 0 :(得分:1)
正如@enxaneta所说,您必须设置<use>
元素的样式,然后使颜色渗透到符号中。
但是您首先需要从符号中删除stroke
属性。否则,presentation属性将覆盖您希望其继承的颜色。
.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>
答案 1 :(得分:0)
在.icon-orange
内有一个<use>
元素。您必须设置use元素的样式。但是,如果您需要引用#icon-arrow,请按以下步骤操作:
/*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>