用 CSS 解决！为 SVG 背景着色

这篇文章是关于 CSS 能力的系列文章中的第一篇。

CSS 正在变得越来越强大，并且随着 CSS 网格和自定义属性（也称为 CSS 变量）等功能的出现，我们看到了许多真正有创意的解决方案。CSS 可以做些什么来简化 UI 的编写，这种可能性仍在探索之中，这令人兴奋！

其中之一现在是我最喜欢的 CSS 功能之一：过滤器。让我们看看如何使用过滤器来解决您在将 SVG 用作元素的背景图像时遇到的问题。

CSS 过滤器

首先，让我们从过滤器的概述开始。它们包括以下函数

• blur()
• brightness()
• contrast()
• drop-shadow()
• grayscale()
• hue-rotate()
• invert()
• opacity()
• saturate()
• sepia()

这些效果也可以通过 SVG 过滤器或 WebGL 着色器来实现，但 CSS 过滤器是在大多数浏览器中最有效的方式实现基本转换的最简单方法。因为它们是 SVG 过滤器效果的快捷方式，所以您也可以使用 filter: url() 并将过滤器效果 ID 指定到任何元素上。如果您想尝试自定义过滤器，我建议您查看 cssfilters.co。

问题：编辑 SVG 背景

我喜欢在网页设计中使用 SVG（可缩放矢量图形）格式。SVG 是一种适用于网页的出色图像格式，并且由于它是基于代码的，因此它允许生成高质量的响应式和交互式内容。当您将 SVG 插入页面时，您可以访问其每个内部元素及其属性，从而允许您对它们进行动画处理、更新值（例如颜色）以及动态插入其他信息。SVG 也是一种出色的图标格式，尤其是 代替图标字体，以及由于其高品质（例如：视网膜屏幕）和较小的图像尺寸（例如：性能）而在较小的 UI 元素中。

我发现，通常当 SVG 用于这些较小的元素或作为大面积插图时，为了简单起见，它会被包含为背景图像。这样做的缺点是，作为开发人员，您不再能够控制 SVG。您无法调整 SVG 背景的单独属性（如填充颜色），因为它就像任何其他图像一样被处理。这个色彩难题可以用 CSS 解决！过滤器来救援！

调整亮度

我第一次发现 SVG 背景挑战是在我为一个网站工作时，该网站有白色 SVG 图标作为社交分享图标，这些图标位于与该应用程序匹配的背景上。当这些图标移到白色背景上时，它们不再可见。您可以使用 filter: brightness()，而不是创建新的图标或更改标记以插入内联 SVG。

使用 brightness 过滤器，任何大于1的值都会使元素更亮，任何小于1的值都会使元素更暗。因此，我们可以使那些浅色的 SVG 变暗，反之亦然！

我在上面所做的是创建一个具有 filter: brightness(0.1) 的 dark 类。您也可以对更暗的图标执行相反的操作。您可以通过创建一个具有 filter: brightness(100) 之类的 light 类来使图标变亮，或者根据您的需要进行调整。

填充颜色为 #000 或 rgb(0,0,0) 的图标不会变亮。您需要在任何 rgb 通道中都有大于 0 的值。fill: rgb(1,1,1) 与 brightness(1000) 之类的较高亮度值非常有效，但即使 brightness(1000) 也无法在纯黑色上起作用。这不会影响浅色和白色。

调整颜色

我们现在已经看到了如何使用 brightness() 过滤器调整明暗值，但这并不总是能让我们获得想要的效果。如果我们想给这些图标注入一些颜色怎么办？使用 CSS 过滤器，我们可以做到。一个小技巧是使用 sepia 过滤器以及 hue-rotate、brightness 和 saturation 来创建我们想要的任何颜色。

从白色开始，您可以使用以下混合来获得上面的海军蓝、蓝色和粉色。

.colorize-pink {
  filter: brightness(0.5) sepia(1) hue-rotate(-70deg) saturate(5);
}

.colorize-navy {
  filter: brightness(0.2) sepia(1) hue-rotate(180deg) saturate(5);
}

.colorize-blue {
  filter: brightness(0.5) sepia(1) hue-rotate(140deg) saturate(6);
}

这里的世界是你的牡蛎。SVG 只是多种过滤器的用例之一。您可以将它应用于任何媒体类型 - 图像、gif、视频、iframe 等，并且支持也很好。

这里最后要注意的是要记住您的用户！过滤器在 Internet Explorer 中不起作用，因此请向所有用户发送可见的图像（例如，不要在白色背景上使用应用了过滤器的白色 SVG，因为您的 IE 用户将看不到任何内容）。此外，请记住为图标可访问性使用替代文本，这样您就可以在自己的应用程序中使用这种技术了！