如何使用 SVG 模式作为背景

svg 模式提供了一种比 css 平铺更灵活的方法来在网页上重复背景图像。让我们看看为什么会这样，以及如何使用它们。

你会学到什么

本教程以视频和文本形式提供 - 以下是您将学到的内容的细分：

我们将从更熟悉的 CSS 平铺方法开始。
然后我们将创建几个 SVG 模式，同时学习正确的语法。
我们将比较这两种方法并讨论优缺点。
接下来，我们将介绍一些可用于创建 SVG 模式的工具。
最后，我们将检查浏览器对 SVG 的支持。

1.CSS平铺

让我们从检查 CSS 平铺开始——一种更传统的重复背景图像的方法。这个想法很简单：我们将一个 URL 传递给background我们想要覆盖的元素的属性。URL 指向一个图像文件，在本例中是一个 PNG 文件。默认情况下，我们的图像将沿两个轴重复。

body {
background: url("cuadros.png");
}

看起来是这样的：

See the Pen How to Use SVG Patterns as Backgrounds: CSS tiling by Envato Tuts+ (@tutsplus) on CodePen.

2. SVG 模式

现在让我们看一下 SVG 模式——第一次遇到这种模式时，有点难以理解。我们将从手动编写一个示例开始。

从 SVG 开始

首先，我们将创建一个 svg 元素，给它一个 100% 的高度和宽度，以便它占据我们放置它的任何容器。

<svg width="100%" height="100%">

</svg>

要创建一个pattern，我们必须将它放在defssvg 的（定义）部分，如下所示：

<svg width="100%" height="100%">
    <defs>
        <pattern>

        </pattern>
    </defs>
</svg>

现在让我们为该模式元素添加一些属性。我们将给它一个 ID，以便我们稍后可以引用它，然后我们将指定起始 X 和 Y 坐标、宽度和高度值，并声明它们patternUnits是userSpaceOnUse （这定义了坐标系统，您可以在 MDN 上阅读更多信息):

<svg width="100%" height="100%">
    <defs>
        <pattern id="polka-dots" x="0" y="0" width="100" height="100" patternUnits="userSpaceOnUse">

        </pattern>
    </defs>
</svg>

设置好这些参数后，我们现在需要定义将要重复的图像。让我们创建一个基本的圆圈：

<svg width="100%" height="100%">
    <defs>
        <pattern id="polka-dots" x="0" y="0" width="100" height="100" patternUnits="userSpaceOnUse">

            <circle fill="#bee9e8" cx="50" cy="50" r="25">
            </circle>

        </pattern>
    </defs>
</svg>

没有任何模式是可见的，但那是因为我们已经定义了它而没有将它实际应用到任何东西上。让我们通过将它应用到<rect>我们的外部来改变它<defs>。

<svg width="100%" height="100%">
    <defs>
        <pattern id="polka-dots" x="0" y="0" width="100" height="100" patternUnits="userSpaceOnUse">

            <circle fill="#bee9e8" cx="50" cy="50" r="25">
            </circle>

        </pattern>
    </defs>

    <rect x="0" y="0" width="100%" height="100%" fill="url(#polka-dots)"></rect>
</svg>

至关重要的是，您会看到fill属性（通常可能是颜色值或名称）指向包含我们新定义的模式 ID 的 URL fill="url(#polka-dots)"：.

查看下面的演示：

See the Pen How to Use SVG Patterns as Backgrounds: SVG patterns i by Envato Tuts+ (@tutsplus) on CodePen.

更复杂的 SVG 模式

对于更复杂的示例，我们将抛开手动编码，使用第三方工具生成模式。我们将使用 heropatterns.com，这个网站允许您选择预定义的 SVG 模式，更改它们的颜色和属性，然后复制生成的代码。

我将使用拼图模式：

我将只复制d=""参数，即绘制的实际路径，而不是完整地复制生成的 CSS。

我们设置的 svg 代码与之前的示例几乎完全相同。当然，其中的 ID<pattern>会有所不同，我们将根据在 heropatterns 上使用的内容为其赋予略微不同的尺寸。

因此，在上一个示例中，我们定义了 a <circle>，这次我们定义了 a <path>。我们给它一个填充颜色，然后我们粘贴到我们刚才复制的路径中。这就是给我们的：

See the Pen How to Use SVG Patterns as Backgrounds: SVG patterns ii by Envato Tuts+ (@tutsplus) on CodePen.

3. CSS平铺与。SVG 模式

? CSS 平铺专家：

更容易使用，当然适合初学者
享有广泛的浏览器支持

? CSS 平铺缺点：

当与位图一起使用时，它是不可扩展的
较低的性能
更难定制
仅限于矩形重复

? SVG 模式优点：

轻的
从 CSS 自定义
可扩展
能够创建复杂的图案

? SVG 模式缺点：

比较难用
非通用浏览器支持

4. SVG 模式工具

看看这四个资源，它们对于生成实际代码和想法非常有用！

heropatterns.com
SVG 模式库
地理图案
thepatternlibrary.com

5. 浏览器支持

SVG 是一种广泛支持的技术，即使在 IE9 等较旧的浏览器中也是如此。<pattern>然而，一些 SVG 功能并没有得到如此程度的支持，而且对于属性的细节（例如patternUnits、patternContentUnits等）确实没有太多可用的信息patterntransform。下面有一些有用的链接，包括 Mozilla 的文档——它们会让您了解当前可用的信息。

根据我自己的测试，我可以告诉你，Windows 和 mac OS 上的现代浏览器都可以很好地处理 SVG 模式。甚至低至 IE11。