悬停时更改 SVG 的颜色

Avatar of Chris Coyier
Chris Coyier 于

DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 价值 200 美元的免费信用额度！

有许多不同的方法可以使用 SVG。根据使用方式，在不同状态或条件下（:hover、:active、:focus、类名更改等）重新着色 SVG 的策略也会有所不同。

让我们看看这些方法。

内联 SVG

内联 SVG 是 我最喜欢的使用 SVG 的方式，部分原因是它很容易访问和设置 SVG 的样式。

查看 CodePen 上 Chris Coyier (@chriscoyier) 编写的
bJXNyy。
在 CodePen 上。

如果您习惯于使用图标字体，您可能会喜欢它们易于更改颜色的特性。与 SVG 不同，图标字体在很大程度上局限于单色，但仍然可以非常方便地使用 color 更改单色。使用内联 SVG 允许您设置 fill，它会级联到 SVG 内的所有元素，或者您可以在需要时单独填充每个元素。

SVG 符号 / 使用

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

查看 CodePen 上 Chris Coyier (@chriscoyier) 编写的
使用 SVG 悬停。
在 CodePen 上。

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

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

SVG 背景图像

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

查看 CodePen 上 Chris Coyier (@chriscoyier) 编写的
背景 SVG 悬停。
在 CodePen 上。

如果您不想切换源，那么另一种可能性是 使用过滤器。

查看 CodePen 上 Chris Coyier (@chriscoyier) 编写的
使用过滤器的背景 SVG 悬停。
在 CodePen 上。

尝试找到合适的过滤器来获得正确的颜色是一件很棘手的事情。幸运的是，Barrett Sonntag 创建了一个工具 来为您计算过滤器！将黑色更改为红色最终会得到这样的奇特组合：invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%);。

SVG 还有 object，它很酷的一点是它在过去曾经有一个内置的备用方案——尽管现在浏览器的支持非常好，我老实说从未使用过它。但是，如果您使用它，您可能必须使用这种 filter 技术来在悬停时切换颜色。

查看 CodePen 上 Chris Coyier (@chriscoyier) 编写的
背景 SVG 对象悬停。
在 CodePen 上。

使用蒙版而不是背景图像

通过这种方式，SVG 仍然负责绘制形状，但颜色来自它后面的 background-color（或图像！或渐变！）而不是 SVG 本身。

查看 CodePen 上 Chris Coyier (@chriscoyier) 编写的
使用蒙版的背景 SVG 悬停。
在 CodePen 上。

SVG 背景图像作为数据 URL

这与上面的方法并没有太大区别，但它确实开辟了一种有趣的可能性：使用变量来表示内部填充。以下是使用 Sass 将 URL 保持为变量的示例

查看 CodePen 上 Chris Coyier (@chriscoyier) 编写的
使用数据 URL 变量的背景 SVG 悬停。
在 CodePen 上。

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

嘘！创建 DigitalOcean 帐户并获得 价值 200 美元的免费信用额度 用于基于云的托管和服务。

评论

  1. Alex Berkowitz
    评论的永久链接#

    总的来说，<use> 是我实现 SVG 图标最喜欢的方法。它兼具内联 SVG 的优点，而无需在 HTML 文件中处理大量的 SVG 代码。不仅如此，HTML 本身也变得更加清晰易读，因为您拥有一个简短且自描述性的（通过定义的 ID）元素。此外，您还可以将所有内容保存在单个独立的 SVG 文件中，这使得在 Illustrator 中通过图层进行正确的组织以及在文本编辑器中获得良好的可读性成为可能。

  2. Chad P
    评论的永久链接#

    感谢这篇文章。很好的复习！

  3. Vijay
    评论的永久链接#

    感谢这篇文章。我也更喜欢 use 方法。将 SVG 符号代码放在页脚有什么问题吗？
    此外，是否最好继承填充颜色？https://codepen.io/vj/pen/EzgqeK

    svg {
  width: 1em;
  height: 1em;
  fill: currentColor;
}
  4. iGadget
    评论的永久链接#

    难道没有办法引用 SVG 图像中的锚点或 ID 然后仅显示它吗？！我不太记得了，但似乎类似于 url(image.svg#red-one)。您能也讲讲这个吗？！

    • MarkC
      评论的永久链接#

      我在 Full Circle Magazine 的 Inkscape 教程第 80 部分中介绍了这种方法（免费下载）：http://fullcirclemagazine.org/issue-140/

      它基本上利用了 CSS 的 :target 选择器来仅显示图像中的特定组。上一篇文章（在第 139 期中）还包括了一种使用 SVG 中的 viewBox 和/或命名视图来实现类似效果的方法。

    • marsjaninzmarsa
      评论的永久链接#

      内联和 URL 编码的 SVG 很棒，尤其是当您意识到 gzip 如何出色地处理重复的代码部分时，因此即使是相同图标的不同颜色变体也并不像您想象的那样糟糕。

  5. Johnny
    评论的永久链接#

    我一直难以找到一种方法来定位 SVG 内部的单个路径以进行样式设置。我想使用一个 SVG 作为页面上的背景图案，并希望鼠标悬停在路径上时改变颜色。这可能吗？

  6. Francis Boudreau
    评论的永久链接#

    我喜欢使用的方式
    1. SVG：将您想要在悬停时控制颜色的 SVG 设置为黑色 #000000。
    2. CSS：在标签上设置 fill: currentColor;。
    3. CSS：更改 CSS 中的 color 属性以更改 SVG 的颜色（与过渡一起使用！）。

  7. Hwan Yang
    评论永久链接#

    很棒的教程，但是如何在我的电脑中获取 SVG 图标文件的路径？您在教程中只使用加载每个图标的路径，但从未提及如何获取路径。

  8. Gabe
    评论永久链接#

    这个 PostCSS 插件非常棒：https://github.com/TrySound/postcss-inline-svg

    它允许您轻松地更改 CSS 背景 SVG 中的填充/描边颜色。

  9. Marcos Carlevaro
    评论永久链接#

    为了使“遮罩”方法在 iPhone 上正常工作（Firefox、Chrome，不包括 Safari），我必须添加相应的 CSS 规则“-webkit-mask: (url)”和“-webkit-mask-size: cover”。

此评论线程已关闭。如果您有重要信息需要分享，请联系我们。

© 2024 . All rights reserved.