svg使用图片作为背景图_如何使用SVG模式作为背景

最新推荐文章于 2025-04-07 15:59:30 发布

daique1908

最新推荐文章于 2025-04-07 15:59:30 发布

阅读量1.6w

点赞数 1

文章标签： java python css js html ViewUI

本文介绍如何使用SVG模式替代CSS平铺作为网页背景，提供更灵活的可扩展图像重复方法。通过手工编码SVG模式和利用在线工具，你可以创建复杂且高性能的背景图案，同时探讨了SVG模式相对于CSS平铺的优缺点及浏览器支持情况。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

svg使用图片作为背景图

与CSS拼贴相比，SVG模式提供了一种在网页上重复背景图像的更加灵活的方法。让我们看看为什么会这样，以及如何使用它们。

您将学到什么

本教程有视频和文本两种形式，以下是您将学到的内容的细分：

我们将从研究更熟悉CSS切片方法开始。
然后，我们将创建几个SVG模式，并在学习过程中学习正确的语法。
我们将比较这两种方法，并讨论其优缺点。
接下来，我们将看一些可用于创建SVG模式的工具。
最后，我们将检查浏览器对SVG的支持。

观看截屏

1. CSS平铺

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

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

看起来是这样的：

2. SVG模式

现在让我们看一下SVG模式-初次遇到时，有些东西很难理解。我们将从手工编写示例开始。

手工编码SVG

从SVG开始

首先，我们将创建一个svg元素，使其高度和宽度为100％，以便其占用我们放置在其中的任何容器。

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

要创建pattern我们必须将其放置在svg的defs （definitions）部分中，如下所示：

<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>

尚无可见的模式，但这是因为我们在定义模式时并未将其实际应用于任何内容。让我们通过将其应用于<defs>之外的<rect>来更改它。

<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)" 。

查看下面的演示：

更加复杂的SVG模式

对于更复杂的示例，我们将保留手工编码，并使用第三方工具生成模式。我们将使用heropatterns.com ，该网站可让您选择预定义的SVG模式，更改其颜色和属性，然后复制生成的代码。

我将使用拼图模式：

我将不复制整个生成CSS，而仅复制d=""参数，它是绘制的实际路径。

我们设置的svg代码将与前面的示例几乎完全相同。 <pattern>的ID当然会有所不同，我们将根据heropattern上使用的ID为其赋予稍有不同的尺寸。

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

SVG模式3. CSS平铺对比。

😀CSS平铺优点：

易于使用，对于初学者当然
享有广泛的浏览器支持

😡CSS平铺缺点：

与位图一起使用时，不可缩放
效能低下
难以定制
仅限矩形重复

😀SVG模式的优点：

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

😡SVG模式缺点：

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

4. SVG模式工具

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

5.浏览器支持

SVG是一项广泛支持的技术，即使在IE9之类的旧版浏览器中也是如此。一些SVG特征，然而，不享受支持到这样的程度，并且确实没有可用于的具体多的信息<pattern>性能（如patternUnits ， patternContentUnits ， patternTransform等）。下面有一些有用的链接，包括Mozilla的文档-它们将使您大致了解当前可以使用的信息。

通过我自己的测试，我可以告诉您，Windows和Mac OS上的现代浏览器都可以处理SVG模式。甚至下降到IE11。