jquery - 使用 标签更改 SVG 填充颜色不起作用

Question

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

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

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

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

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

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

Answer 1

使用 <use> 时命令，SVG 元素落入 shadow DOM

阅读文章:
Styling SVG Content with CSS作者:萨拉·苏埃丹

The Shadow DOM is similar to the normal DOM except that, instead of being part of the main document subtree, nodes in the Shadow DOM belong to a document fragment which is basically just another subtree of nodes which are not as vulnerable to scripts and styles as normal DOM nodes are. This gives authors a way to encapsulate and scope styles and scripts when creating modular components. If you’ve ever used the HTML5 video element or the range input type and wondered where the video controls or range slider components came from, then you’ve already come across the Shadow DOM before.

因此，为 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