使用 <use> 标签更改 SVG 填充颜色不起作用答案

【问题标题】：Change SVG fill color with <use> tag not working使用 <use> 标签更改 SVG 填充颜色不起作用
【发布时间】：2020-05-12 13:42:05
【问题描述】：

我只想更改 svg 填充颜色和悬停颜色。但我看到这个 svg 是这样附加的：

<use xlink:href="#search-magnify"></use>

我认为它指的是网站某处的这个 svg。我只想更改填充颜色而不编辑原始 svg。所以我尝试以这种方式将它与类和样式一起包装在跨度上。

.icon svg path{
  fill: red;
  color: red;
}

但它根本不起作用。这是fiddle。

我在这里缺少什么？这难道不是css能实现的吗？

【问题讨论】：

那么它也会改变原来的svg文件填充颜色。
试试这个 CSS .icon svg * { fill: red; } .icon svg:hover * { 填充：黑色； }
查看更新的小提琴jsfiddle.net/uLe0c87b
根本不工作。
你想要什么效果？可能是我弄错了。能否请您再说一遍

标签： jquery html css svg

【解决方案1】：

使用<use> 命令时，SVG 元素属于shadow DOM

阅读文章：
Styling SVG Content with CSS by Sara Soueidan

Shadow DOM 与普通 DOM 类似，不同之处在于，它不是作为主文档子树的一部分，Shadow DOM 中的节点属于基本上只是另一个子树的文档片段不受脚本和样式影响的节点的数量 DOM 节点是。这为作者提供了一种封装和范围的方法创建模块化组件时的样式和脚本。如果你曾经使用 HTML5 视频元素或范围输入类型并想知道视频控件或范围滑块组件的来源，然后你之前已经接触过 Shadow DOM。

因此，为path添加颜色继承

.icon svg path {
    fill: inherit;
}
use.sm {
    fill: red;
}

下面是完整代码

.icon svg path {
    fill: inherit;
}
use.sm {
    fill: red;
}

<svg version="1.1" id="search-magnify" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="30%" height="30%" viewBox="0 0 57 57" style="enable-background:new 0 0 57 57;" xml:space="preserve">
<path class="st4" d="M55.1,51.9L41.6,37.8C45.1,33.6,47,28.4,47,23C47,10.3,36.7,0,24,0S1,10.3,1,23s10.3,23,23,23 c4.8,0,9.3-1.4,13.2-4.2L50.8,56c0.6,0.6,1.3,0.9,2.2,0.9c0.8,0,1.5-0.3,2.1-0.8C56.3,55,56.3,53.1,55.1,51.9z M24,6 c9.4,0,17,7.6,17,17s-7.6,17-17,17S7,32.4,7,23S14.6,6,24,6z">
</path>
</svg>
        
<span class="icon">
 <svg class="icon-svg svg-search" width="15%" height="15%">
 <use class="sm" xlink:href="#search-magnify"></use>
 </svg>
</span>

Live Demo

【讨论】：

奇怪的是，如果我把它放到我的真实网站上，它就不起作用了。
@Janath 不，不像你。看着我 - .icon svg path { fill: inherit } 请检查您是否忘记分配课程<use class="sm"

【解决方案2】：

一些观察：

在 CSS 中，您设置的是 use 元素而不是路径。
这里<use xlink:href="#search-magnify"></use>search-magnify应该是路径的id而不是svg元素的id
对于使用路径的 svg 元素，您还需要一个 viewBox

.icon svg use{
  fill: red;
}

<span class="icon">
 <svg class="icon-svg svg-search" viewBox="0 0 57 57" width="20" height="20">
 <use xlink:href="#search-magnify"></use>
 </svg>
</span> 


<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 57 57" style="enable-background:new 0 0 57 57;" xml:space="preserve">
<path id="search-magnify" class="st4" d="M55.1,51.9L41.6,37.8C45.1,33.6,47,28.4,47,23C47,10.3,36.7,0,24,0S1,10.3,1,23s10.3,23,23,23 c4.8,0,9.3-1.4,13.2-4.2L50.8,56c0.6,0.6,1.3,0.9,2.2,0.9c0.8,0,1.5-0.3,2.1-0.8C56.3,55,56.3,53.1,55.1,51.9z M24,6 c9.4,0,17,7.6,17,17s-7.6,17-17,17S7,32.4,7,23S14.6,6,24,6z">
</path>
</svg>

【讨论】：