更改悬停在悬停的SVG的颜色

SVG 的应用方式多种多样，而根据不同的应用方式，改变 SVG 在不同状态（悬停 :hover、激活 :active、焦点 :focus、类名变化等）下的颜色策略也不同。让我们分别来看一下：

内联 SVG

内联 SVG 是我个人最喜欢的 SVG 使用方式，部分原因在于它易于访问和样式化。

如果你习惯使用图标字体，你可能会喜欢它们易于更改颜色的一点。图标字体在某种程度上仅限于单色，而 SVG 则不然，但仍然，更改图标字体的单色非常容易。使用内联 SVG 允许你设置 fill 属性，该属性会级联到 SVG 内的所有元素，或者如果需要，你可以分别填充每个元素。

SVG 符号/使用

存在所谓的 SVG 雪碧图，它是一组转换为 <symbol></symbol> 元素的 SVG，这样任何给定的图标都可以通过 <use></use> 元素轻松引用。

你仍然可以很容易地通过外部 CSS 设置填充颜色，但有一些注意事项：

• 内部 SVG 元素（如 <path></path>）本身可以没有填充。这允许从父 SVG 设置的填充级联到 <use></use> 创建的 Shadow DOM。一旦你在 <symbol></symbol> 中添加了类似 <path ... fill="blue"></path> 的内容，你就失去了外部 CSS 的控制。
• 同样，你无法像使用内联 SVG 一样控制 SVG 内各个元素的填充。这意味着你基本上处于单色区域。这涵盖了大多数用例，但仍然是一个限制。

SVG 背景图片

SVG 可以像 PNG、JPG 或任何其他图形格式一样设置为背景图片。此时，你基本上放弃了更改填充的能力。一种可能性（我认为不是特别好的一种）是为每个图标准备两个版本，分别使用不同的颜色，然后在它们之间切换：

如果你不想切换资源，我不会责怪你，所以另一种可能性是使用复杂的过滤器。

尝试调整合适的过滤器以获得正确的颜色是一件棘手的事情。幸运的是，Barrett Sonntag 创建了一个工具来帮你计算过滤器！将黑色转换为红色最终会得到一个古怪的组合，例如：invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%)；。

SVG 还具有 object 属性，这在过去非常简洁，因为它具有内置的回退机制——尽管如今浏览器的支持非常好，但我老实说从未使用过它。但如果你正在使用它，你可能需要使用这种过滤器技术来切换悬停时的颜色。

使用蒙版代替背景图片

通过这种方式，SVG 仍然负责绘制形状，但颜色来自其背后的背景颜色（或图片！或渐变！）而不是 SVG 本身。

SVG 背景图片作为数据 URL

这与上面的方法差别不大，但它确实提供了一种有趣的可能性：使用变量进行内部填充。以下是使用 Sass 保持 URL 为变量的示例：

你也可以使用原生 CSS 自定义属性来实现这一点！

以上是更改悬停在悬停的SVG的颜色的详细内容。更多信息请关注PHP中文网其他相关文章！