我正在研究一些 SVG 图标<symbol>我希望能够改变:hover, :focus, and :active。具体来说，我需要能够更改 SVG 中特定路径的颜色。通常，对于任何其他元素，我可以做这样的事情
.parent .child {
fill: blue;
}
.parent:hover .child {
fill: red;
}
但是，当将此应用于我的 SVG 符号时，它不起作用。在过去几年中，我发现关于使用 Shadow-DOM 内容（如 SVG 符号）更改 css 的问题的讨论并不多，但仅使用 CurrentColor 对我来说不起作用，因为我需要使用两种颜色。
我有一个 CodePen 来记录我的场景here https://codepen.io/cameronlewis35/pen/mBrbJr
看起来这应该很简单，但我已经为此纠结了一段时间了。有人有任何可能有帮助的想法吗？
提前致谢！
这里也提出了类似的问题：SVG 使用元素和 :hover 样式 https://stackoverflow.com/questions/13673441/svg-use-element-and-hover-style
问题是引用的元素use实际上并不是 DOM 的一部分，因此您无法使用 CSS 访问它们。但是，在use元素本身（比如fill or color) 将渗透到引用的元素。
所以，首先我们的CSS只能改变use元素。那么我们就需要用到一些技巧了article https://tympanus.net/codrops/2015/07/16/styling-svg-use-content-css/@Matheus 提到要处理不同的颜色。这意味着更改 SVG 代码symbol有一点。如果图标每个状态只需要两种颜色，我们可以使用fill + color/currentColor:
<g id="icon_alarm">
<g class="transflip">
<path class="transflip" d="M8 1.3c-3.6 ....." />
<path class="transflip" d="M1 5.1C1.7 3....." />
</g>
<g class="fillflip">
<path class="fillflip" fill="currentColor" d="M11.7 8......" />
</g>
...
.icon use {
fill: transparent;
color: #007fa3;
}
.icon:hover use {
fill: #007fa3;
color: transparent;
}
如果图标每个状态需要更多颜色，我们可以使用CSS 变量 https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables并添加style="fill: var(--my-special-color)"SVG 中的样式（也是提到的文章中的一个技巧），但这在某些浏览器中不起作用，例如IE/边缘。
使用这两种技术更新了笔：https://codepen.io/Sphinxxxx/pen/GMjgxJ?editors=1100 https://codepen.io/Sphinxxxx/pen/GMjgxJ?editors=1100
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
