我正在尝试为某些 svg 获得悬停效果。我正在处理的代码基本上是包含在 svg 中的图标，因此它们都位于背景之上(它看起来像一张 map - 我希望 map 上的各个图标在悬停时突出显示)。
问题是过滤器似乎对嵌套的 svg 元素没有任何影响。我试过将过滤器直接放在嵌套元素中，但没有任何改变。
这是我想要使用的代码的一个简单示例。
.icon:hover{
filter: sepia(100%);
}<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<svg x="10" class="icon">
<rect x="10" y="10" height="100" width="100" style="fill: #0000ff"/>
</svg>
<svg x="200">
<rect x="10" y="10" height="100" width="100" style="fill: #0000ff"/>
</svg>
</svg>
</body>
</html>最佳答案
您可以使用 svg 过滤器。 sepiatone 过滤器来自 https://gist.github.com/jorgeatgu/5b338cc1a4e0df901348
svg{border:1px solid}
.icon:hover{
filter: url(#sepiatone);
}<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<filter id="sepiatone">
<feColorMatrix type="matrix" values=".343 .669 .119 0 0 .249 .626 .130 0 0 .172 .334 .111 0 0 .000 .000 .000 1 0"/>
</filter>
</defs>
<svg x="10" class="icon">
<rect x="10" y="10" height="100" width="100" style="fill: #0000ff"/>
</svg>
<svg x="200">
<rect x="10" y="10" height="100" width="100" style="fill: #0000ff"/>
</svg>
</svg>关于css - 如何让过滤器在嵌套的 SVG 上工作？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57082166/