SVG 图案
SVG 图案 - <pattern>
The <pattern> 元素用于创建图形，该图形以重复的 x 和 y 坐标间隔重绘，以覆盖区域。
所有 SVG 图案都在 <defs> 元素中定义。 <defs> 元素是 “definitions” 的缩写，包含特殊元素（如图案）的定义。
The <pattern> 元素有一个必需的 id 属性，该属性标识图案。然后，图形/图像指向要使用的图案。
然后，在 <pattern> 元素内部，我们放置一个或多个元素，这些元素将用作填充图案。
一个简单的图案示例
以下示例创建一个用小圆圈填充的矩形
这是 SVG 代码
示例
<svg width="400" height="110" xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern id="patt1" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
<circle cx="10" cy="10" r="10" fill="red" />
</pattern>
</defs>
<rect width="200" height="100" x="0" y="0" stroke="black" fill="url(#patt1)" />
</svg>
亲自尝试 »
代码解释
- The
id属性的<pattern>元素为图案定义一个唯一的名称 - The
x和y属性的<pattern>元素定义图案在形状中开始的距离 - The
width和height属性的<pattern>元素定义图案的宽度和高度 - The
<circle>元素在<pattern>元素内部定义填充图案的形状 - The
fill="url(#patt1)"属性的<rect>元素指向 “patt1” 图案 - 矩形将用图案填充
带渐变的图案
以下示例创建一个用浅蓝色矩形和渐变圆圈填充的矩形
这是 SVG 代码
示例
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="grad1">
<stop offset="0%" stop-color="white" />
<stop offset="100%" stop-color="red" />
</linearGradient>
<pattern id="patt2" x="0" y="0" width="0.25" height="0.25">
<rect x="0" y="0" width="50" height="50" fill="lightblue" />
<circle cx="25" cy="25" r="20" fill="url(#grad1)" fill-opacity="0.8" />
</pattern>
</defs>
<rect width="200" height="200" x="0" y="0" stroke="black" fill="url(#patt2)" />
</svg>
亲自尝试 »
代码解释
- The
id属性的<pattern>元素为图案定义一个唯一的名称 - The
x和y属性的<pattern>元素定义图案在形状中开始的距离 - The
width和height属性的<pattern>元素定义图案的宽度和高度。我们希望图案在水平方向上重复 4 次，在垂直方向上重复 4 次，所以我们将高度和宽度设置为 0.25（表示图案的宽度和高度是总框大小的 25%） - The
<rect>元素在<pattern>元素内部定义填充图案的一种形状（一个浅蓝色 50x50 矩形） - The
<circle>元素在<pattern>元素内部定义填充图案的另一种形状（一个从白色到红色的渐变圆圈） - The
fill="url(#grad1)"属性的<circle>元素指向 “grad1” 渐变 - The
fill="url(#patt2)"属性的<rect>元素指向 “patt2” 图案 - 矩形将用图案填充
