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

Question

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

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

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

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

但它根本不起作用。这是小提琴。

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

Answer 1

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

\n\n

阅读文章：
\n使用 CSS 设置 SVG 内容样式，作者：Sara Soueidan

\n\n

\n

Shadow DOM 与普通 DOM 类似，只不过 Shadow DOM 中的节点不是主文档子树的一部分，而是属于一个文档片段，而该文档片段基本上只是另一个节点的子树，而这些节点不属于主文档子树。与正常的 DOM 节点一样，容易受到脚本和样式的影响。这为作者提供了一种在创建模块化组件时封装样式和脚本并确定其范围的方法。如果您\xe2\x80\x99曾经\n使用过HTML5视频元素或范围输入类型，并且想知道\n视频控件或范围滑块组件来自何处，那么\n您\xe2\x80\x99已经遇到过之前的 Shadow DOM。

\n

\n\n

因此，添加颜色继承path

\n\n

.icon svg path {\n    fill: inherit;\n}\nuse.sm {\n    fill: red;\n}\n

\n\n

下面是完整的代码

\n\n

\r\n

\r\n

.icon svg path {\n    fill: inherit;\n}\nuse.sm {\n    fill: red;\n}\n

\r\n

.icon svg path {\r\n    fill: inherit;\r\n}\r\nuse.sm {\r\n    fill: red;\r\n}

\r\n

\r\n

\r\n

\n\n

现场演示

\n