前端必知必会 | 学SVG看这篇就够了（七）

这是我参与8月更文挑战的第12天，活动详情查看：8月更文挑战

这是SVG系列目录：

• 前端必知必会 | 学SVG看这篇就够了（一）
• 前端必知必会 | 学SVG看这篇就够了（二）
• 前端必知必会 | 学SVG看这篇就够了（三）
• 前端必知必会 | 学SVG看这篇就够了（四）
• 前端必知必会 | 学SVG看这篇就够了（五）
• 前端必知必会 | 学SVG看这篇就够了（六）

前言

在SVG中，图形对象一般使用fill 、stroke进行填充。SVG可以自定义一个图形作为填充的背景，这个图形可以是一个SVG元素，也可以是位图图像，下面我们结合实例来讲解如何去使用。

图案

pattern标签用于定义一个填充对象，可以将定义的这个对象到指定图形中进行重复、平铺、覆盖填充。之后使用自身的属性fill / stroke来引用自定义的填充对象pattern。

它和渐变一样，需要被放置到defs标签中。

我们先看下这个简单例子：

<svg width="200" height="200">
    <defs>
        <pattern id="bg_red_circle" width="100%" height="100%">
            <circle cx="25" cy="25" r="20" stroke="red" fill="none" fill-opacity="0.5"/>
        </pattern>
    </defs>
    <rect width="50" height="50" x="10" y="10" stroke="blue" fill="url(#bg_red_circle)"></rect>
复制代码

使用pattern定义了一个自定义图案，在pattern标签中放置你想要的图形，这里我们放的是一个红色无填充的圆形。给pattern标签需要绑定一个ID值，用于我们在其他元素上引用这个自定义图案进行填充。

这里是width和height是定义这个pattern是否占满被应用的图形，100%（ or 1 ）即是占满整个元素。如果不是占满，则是重复平铺在被应用的图形上。如果你想要在绘制时偏移矩形的开始点，也可以使用x和y属性

在pattern中，它也有自己的定位系统以及它们的大小。和SVG类似。

上面的例子我们的背景，被填充的图形比例都是1:1，我们再看看另外一个例子：

<svg width="300" height="300">
    <defs>
        <pattern id="bg_red_circle" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse"
        </pattern>
    </defs>
    <rect width="200" height="200" stroke="blue" fill="url(#bg_red_circle)"></rect>
</svg>
复制代码

与上个例子不同的是，这个例子设置了自定义图形的width和height（这与patternUnits有关系），被填充的图形大小则是200*200，当画布还有多余的位置则会平铺填充。

这个例子还多了一个patternUnits属性， 用来定义图案效果区域的单位。他有两个值分别是userSpaceOnUse和objectBoundingBox。他的默认值是objectBoundingBox。

• objectBoundingBox：x、y、width和height表示的值都是外框的坐标系统（包裹pattern的元素）。也就是说，图案的单位进行了一个缩放，比如：pattern中为1的值，会变成和包裹元素的外框的width和height一样的大小。（使用这个值时，width和height需要小于1.0，否则图案只会出现一次）
• userSpaceOnUse：x、y、width和height表示的值都是当前用户坐标系统的值。也就是说，这些值没有缩放，都是绝对值。

在上面例子中，圆是完美的铺满了整个矩形。我们可以设置x和y值，看看有什么变化？

<svg width="300" height="300">
    <defs>
        <pattern id="bg_red_circle" x="10" y="10" width="20" height="20" patternUnits="userSpaceOnUse">
            <circle cx="10" cy="10" r="10" stroke="red" fill="none"/>
        </pattern>
    </defs>
    <rect width="200" height="200" stroke="blue" fill="url(#bg_red_circle)"></rect>
</svg>
复制代码

从矩形的四边，我们可以发现整个图形背景进行了偏移，也就是说x和y属性是修改整个图形的位置。

同样，我们也可以将这个图案应用到描边中

<svg width="300" height="300">
    <defs>
        <pattern id="bg_red_circle" x="10" y="10" width="20" height="20" patternUnits="userSpaceOnUse">
            <circle cx="10" cy="10" r="10" stroke="red" fill="none"/>
        </pattern>
    </defs>
    <rect width="200" height="200" fill="none" stroke-width="20" stroke="url(#bg_red_circle)"></rect>
</svg>
复制代码

最后

本篇文章讲述了在SVG中的如何在创建图案，然后使用fill 、stroke属性引用到绘制的图形中。以及图案中的一些相关属性，感谢你的阅读！

?? 关注我，不迷路！ ??