svg学习记录（七）

最新推荐文章于 2023-05-17 09:25:34 发布

赐你岁月如歌

最新推荐文章于 2023-05-17 09:25:34 发布

阅读量604

点赞数 1

文章标签： html5

本文链接：https://blog.csdn.net/a253399414/article/details/121893243

版权

本文介绍了SVG中的图案填充，包括如何定义填充对象、设置图案属性以及如何应用到图形中。通过实例解析了`pattern`标签的使用，探讨了`patternUnits`属性的影响以及`fill`、`stroke`属性在图案填充中的作用。

摘要由CSDN通过智能技术生成

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