SVG图案填充-Pattern

前言

SVG图案一般用于在图图形对象内部定义形状,创建一个新形状并用图案填充它。一个SVG元素或是位图图像,都可以通过元素在x轴或y轴方向以固定的间隔平铺。
下面会展示几个的简单SVG形状的。这个列表可能会随着时间的推移而增长,但是要想拥有一个全面的集合,可以在这基础上创造新图案。

圆形图案

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<svg width="100%" height="100%">

<mask maskUnits="userSpaceOnUse" id="fade">
<linearGradient id="gradient" x1="0" y1="0" x2="0" y2="100%">
<stop offset="0" style="stop-color: #FFFFFF"></stop>
<stop offset="1" style="stop-color: #000000"></stop>
</linearGradient>
<rect fill="url(#gradient)" width="100%" height="100%"></rect>
</mask>

<pattern id="pattern-circles" x="0" y="0" width="40" height="40" patternUnits="userSpaceOnUse">
<circle mask="url(#fade)" cx="20" cy="20" r="20"></circle>
</pattern>
<rect x="0" y="0" width="100%" height="100%" fill="url(#pattern-circles)"></rect>

</svg>

SVG图案填充-Pattern1

棋盘图案

1
2
3
4
5
6
7
8
9
10
<svg width="100%" height="100%">

<pattern id="pattern-checkers" x="0" y="0" width="200" height="200" patternUnits="userSpaceOnUse">
<rect class="checker" x="0" width="100" height="100" y="0"></rect>
<rect class="checker" x="100" width="100" height="100" y="100"></rect>
</pattern>

<rect x="0" y="0" width="100%" height="100%" fill="url(#pattern-checkers)"></rect>

</svg>

SVG图案填充-Pattern2

六角形图案

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<svg width="100%" height="100%">

<pattern id="pattern-hex" x="0" y="0" width="112" height="190" patternUnits="userSpaceOnUse" viewBox="56 -254 112 190">

<g id="hexagon">
<path d="M168-127.1c0.5,0,1,0.1,1.3,0.3l53.4,30.5c0.7,0.4,1.3,1.4,1.3,2.2v61c0,0.8-0.6,1.8-1.3,2.2L169.3-0.3 c-0.7,0.4-1.9,0.4-2.6,0l-53.4-30.5c-0.7-0.4-1.3-1.4-1.3-2.2v-61c0-0.8,0.6-1.8,1.3-2.2l53.4-30.5C167-127,167.5-127.1,168-127.1 L168-127.1z"></path>
<path d="M112-222.5c0.5,0,1,0.1,1.3,0.3l53.4,30.5c0.7,0.4,1.3,1.4,1.3,2.2v61c0,0.8-0.6,1.8-1.3,2.2l-53.4,30.5 c-0.7,0.4-1.9,0.4-2.6,0l-53.4-30.5c-0.7-0.4-1.3-1.4-1.3-2.2v-61c0-0.8,0.6-1.8,1.3-2.2l53.4-30.5 C111-222.4,111.5-222.5,112-222.5L112-222.5z"></path>
<path d="M168-317.8c0.5,0,1,0.1,1.3,0.3l53.4,30.5c0.7,0.4,1.3,1.4,1.3,2.2v61c0,0.8-0.6,1.8-1.3,2.2L169.3-191 c-0.7,0.4-1.9,0.4-2.6,0l-53.4-30.5c-0.7-0.4-1.3-1.4-1.3-2.2v-61c0-0.8,0.6-1.8,1.3-2.2l53.4-30.5 C167-317.7,167.5-317.8,168-317.8L168-317.8z"></path>
</g>

</pattern>
<rect x="0" y="0" width="100%" height="100%" fill="url(#pattern-hex)"></rect>

</svg>

SVG图案填充-Pattern3

立方体图案

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<svg width="100%" height="100%">

<pattern id="pattern-cubes" x="0" y="126" patternUnits="userSpaceOnUse" width="126" height="200" viewBox="0 0 10 16">

<g id="cube">
<path class="left-shade" d="M0 0l5 3v5l-5 -3z"></path>
<path class="right-shade" d="M10 0l-5 3v5l5 -3"></path>
</g>

<use x="5" y="8" xlink:href="#cube"></use>
<use x="-5" y="8" xlink:href="#cube"></use>

</pattern>

<rect x="0" y="0" width="100%" height="100%" fill="url(#pattern-cubes)"></rect>

</svg>

SVG图案填充-Pattern4