????️ SVG 图案动画（Pattern）
想要在Web页面中绘制背景图案，咱们首先可能想到的是应用 CSS，可能你也有所尝试，比方简略的突变到简单的网格、点阵等，SVG 中也有绘制背景图案的解决方案。
SVG 中 fill 属性反对以 pattern 形式填充一个图案，Pattern 也是一个弱小的元素申明，如果图案设计的比拟完满，那么会轻易失去一个无缝连接的图案。像这样：
原理
在 Web 页面开发中如果想应用 SVG 生成背景，实际上有两种应用办法：
SVG Pattern
一个纯 SVG Pattern 应用的过程大抵如下：
- 在 SVG 中申明一个
pattern元素 pattern中要申明咱们想要绘制的图形- 创立一个新的图形，应用 SVG 中的
fill属性，填充图案
代码例子：
<svg width="360" height="240">
<!-- defined a pattern for canvas -->
<defs>
<pattern id="rect" patternUnits="userSpaceOnUse" width="60" height="60">
<rect width="30" height="30" fill="#4af" :x="range" :y="range"></rect>
</pattern>
</defs>
<!-- simulate the pattern area -->
<rect width="60" height="60" stroke="#a4f" stroke-width="2" fill="none" />
<!-- fill pattern into canvas -->
<rect id="canvas" width="360" height="240" stroke="#aaa" fill="url(#rect)" />
</svg>下面代码会失去如下图形，蓝色方块就是咱们申明的 pattern （图案），图案区域大小为 60 60 （单位 px），下图以紫色边框模仿一个图案的大小范畴，图案就会以这样反复填满整个 360 240 的图形区域，造成一个大的图案。
???? 能够在 CodePen 上进行尝试 ????
https://codepen.io/xiaoluobod…
SVG as background-image
这种办法其实是联合 CSS 应用 SVG ，过程如下：
- 创立好一个 SVG 图形，无需申明
pattern元素 - 应用
background-image引入 Base64 转码过的 Data-URI
代码看起来像这样：
.bg {
background-image: url("data:image/svg+xml;%3csvg.../svg%3E");
}以下面例子为根底，编写一个 SVG as background-image 版本：
???? 能够在 CodePen 上进行尝试 ????
https://codepen.io/xiaoluobod…
这里 SVG 转 Data-URI 应用这个工具：URL-encoder for SVG
实战
在 《CSS 揭秘》这本书中介绍简单的背景图案（网格）时，作者展现了仅用4行代码，即可生成一幅简略的网格图案，也就是本篇文章的题图，如果要应用 SVG 绘制雷同的图案的话，代码行数未见得会比纯 CSS 少。咱们来做下比照：
网格图案 CSS 版
<div class="grid-pattern"></div>body {
margin: 0;
}
.grid-pattern {
height: 100vh;
width: 100vw;
border: 1px solid #fff;
background-color: #269;
background-image: linear-gradient(white 2px, transparent 2px),
linear-gradient(90deg, white 2px, transparent 2px),
linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.3) 1px, transparent 1px);
background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
}书中作者应用的是奇妙的突变 + 地位管制实现网格成果。
???? 能够在 CodePen 上进行尝试 ????
https://codepen.io/xiaoluobod…
网格图案 SVG Pattern 版
<svg width="100%" height="100%">
<defs>
<pattern id="rect" patternUnits="userSpaceOnUse" width="100" height="100">
<!-- defined the shape -->
<rect width='100' height='100' fill='#269'/>
<g fill='#6494b7'>
<rect width='100' height='1' y='20'/>
<rect width='100' height='1' y='40'/>
<rect width='100' height='1' y='60'/>
<rect width='100' height='1' y='80'/>
<rect width='1' height='100' x='20'/>
<rect width='1' height='100' x='40'/>
<rect width='1' height='100' x='60'/>
<rect width='1' height='100' x='80'/>
</g>
<rect width='100' height='100' fill='none' stroke-width='2' stroke='#fff'/>
</pattern>
</defs>
<rect id="canvas" width="100%" height="100%" fill="url(#rect)" />
</svg>咱们这里应用 SVG Pattern 实现下面一样的网格，实现思路就齐全不同了。须要绘制多个根本图形矩形。来达到目标。然而生成整个图案的核心思想还没有变，先构建一个可复制的最小形态，而后让它反复填充斥整个区域。
???? 能够在 CodePen 上进行尝试 ????
https://codepen.io/xiaoluobod…
本章咱们介绍过，SVG 有两种实现图案的形式，另一种 SVG as Background Image 的形式就由你来进行试验。这里不进行介绍了。
既然应用 CSS 创立的背景更简略，那么咱们为什么还要应用 SVG 呢，其实是因为 SVG 创立的图形是矢量的。可控性更强，尤其是要写动画时。咱们能够基于 SVG 图案实现一些简单的动画成果。
动静的背景图案
假如咱们让一个黑白格的相似棋盘的背景图案动起来
这个动画很简略，联合背景色的变动，让矩形元素 scale 到很小，再弹回来。小心看久了被催眠，眼晕。????
其实在制作背景图案动画时，我只需思考如何让 SVG Pattern 元素内的图形动起来即可。至于残余的都是反复了一个 pattern 的动效模式，制作出一个宏大的整体动效。
???? 能够在 CodePen 上进行尝试 ????
https://codepen.io/xiaoluobod…
优良的 SVG Pattern 类库
- Hero Pattern
- Trianglify.io
- http://btmills.github.io/geopattern/
参考
- https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Patterns
- https://css-tricks.com/snippets/svg/svg-patterns/
对于
本文是《SVG 动画开发实战》 系列文章第九章。
Notion 版本
小册是在 Notion 上实现撰写的，所以我保留了 Notion 的分享版本，你也能够点击这里查看。
GitHub 版本
小册提供了 GitHub 版本的在线浏览体验，传送门
微信公众号版本
关注我的技术公号，同样也能够找到此小册系列，目前在更新中。。。
发表回复