图案 pattern

详细介绍SVG的pattern图案元素，包括图案单元、重复模式和坐标系统。通过实例掌握图案填充的各种应用技巧。 pattern元素用于创建可重复的图案，作为填充或描边的内容。

基本语法

<defs>
  <pattern id="图案ID" x="X偏移" y="Y偏移" width="宽度" height="高度" patternUnits="单位模式">
    图案内容
  </pattern>
</defs>

基本图案

<defs>
  <pattern id="dots" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
    <circle cx="10" cy="10" r="4" fill="#3498db"/>
  </pattern>
</defs>
<rect x="30" y="20" width="240" height="100" fill="url(#dots)"/>

图案单元

width和height定义图案单元的大小，决定重复间距。

<defs>
  <pattern id="small" x="0" y="0" width="10" height="10" patternUnits="userSpaceOnUse">
    <circle cx="5" cy="5" r="2" fill="#3498db"/>
  </pattern>
  <pattern id="medium" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
    <circle cx="10" cy="10" r="4" fill="#e74c3c"/>
  </pattern>
  <pattern id="large" x="0" y="0" width="40" height="40" patternUnits="userSpaceOnUse">
    <circle cx="20" cy="20" r="8" fill="#2ecc71"/>
  </pattern>
</defs>

<rect x="20" y="20" width="80" height="100" fill="url(#small)"/>
<rect x="110" y="20" width="80" height="100" fill="url(#medium)"/>
<rect x="200" y="20" width="80" height="100" fill="url(#large)"/>

常见图案样式

方格图案

<defs>
  <pattern id="grid" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
    <rect x="0" y="0" width="10" height="10" fill="#3498db" opacity="0.3"/>
    <rect x="10" y="10" width="10" height="10" fill="#3498db" opacity="0.3"/>
  </pattern>
</defs>
<rect x="30" y="20" width="240" height="100" fill="url(#grid)"/>

条纹图案

<defs>
  <pattern id="h-stripe" x="0" y="0" width="10" height="20" patternUnits="userSpaceOnUse">
    <rect x="0" y="0" width="10" height="10" fill="#3498db" opacity="0.5"/>
  </pattern>
  <pattern id="v-stripe" x="0" y="0" width="20" height="10" patternUnits="userSpaceOnUse">
    <rect x="0" y="0" width="10" height="10" fill="#e74c3c" opacity="0.5"/>
  </pattern>
  <pattern id="d-stripe" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
    <line x1="0" y1="0" x2="20" y2="20" stroke="#2ecc71" stroke-width="5" opacity="0.5"/>
  </pattern>
</defs>

波浪图案

<defs>
  <pattern id="wave" x="0" y="0" width="40" height="20" patternUnits="userSpaceOnUse">
    <path d="M 0,10 Q 10,0 20,10 T 40,10" fill="none" stroke="#3498db" stroke-width="2"/>
  </pattern>
</defs>
<rect x="30" y="20" width="240" height="100" fill="url(#wave)"/>

六边形图案

<defs>
  <pattern id="hex" x="0" y="0" width="30" height="52" patternUnits="userSpaceOnUse">
    <polygon points="15,0 30,13 30,39 15,52 0,39 0,13" fill="none" stroke="#3498db" stroke-width="1"/>
  </pattern>
</defs>
<rect x="30" y="20" width="240" height="100" fill="url(#hex)"/>

patternUnits属性

定义图案坐标系统的两种模式。

<defs>
  <pattern id="user" x="0" y="0" width="15" height="15" patternUnits="userSpaceOnUse">
    <circle cx="7.5" cy="7.5" r="3" fill="#3498db"/>
  </pattern>
  <pattern id="bbox" x="0" y="0" width="0.1" height="0.1" patternUnits="objectBoundingBox">
    <circle cx="5" cy="5" r="2" fill="#e74c3c"/>
  </pattern>
</defs>

<rect x="20" y="20" width="100" height="100" fill="url(#user)"/>
<rect x="180" y="20" width="100" height="100" fill="url(#bbox)"/>

图案偏移

x和y属性控制图案的起始偏移。

<defs>
  <pattern id="offset0" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
    <rect x="0" y="0" width="10" height="10" fill="#3498db" opacity="0.5"/>
  </pattern>
  <pattern id="offset5" x="5" y="5" width="20" height="20" patternUnits="userSpaceOnUse">
    <rect x="0" y="0" width="10" height="10" fill="#e74c3c" opacity="0.5"/>
  </pattern>
  <pattern id="offset10" x="10" y="10" width="20" height="20" patternUnits="userSpaceOnUse">
    <rect x="0" y="0" width="10" height="10" fill="#2ecc71" opacity="0.5"/>
  </pattern>
</defs>

实际应用

背景纹理

<defs>
  <pattern id="texture" x="0" y="0" width="4" height="4" patternUnits="userSpaceOnUse">
    <rect x="0" y="0" width="2" height="2" fill="#ecf0f1"/>
    <rect x="2" y="2" width="2" height="2" fill="#ecf0f1"/>
  </pattern>
</defs>
<rect x="30" y="20" width="240" height="100" fill="#3498db"/>
<rect x="30" y="20" width="240" height="100" fill="url(#texture)"/>

地图标记

<defs>
  <pattern id="danger" x="0" y="0" width="10" height="10" patternUnits="userSpaceOnUse">
    <line x1="0" y1="10" x2="10" y2="0" stroke="#e74c3c" stroke-width="2"/>
  </pattern>
</defs>
<rect x="30" y="30" width="240" height="80" fill="url(#danger)"/>

填充描边

<defs>
  <pattern id="stroke-pattern" x="0" y="0" width="8" height="8" patternUnits="userSpaceOnUse">
    <circle cx="4" cy="4" r="2" fill="#e74c3c"/>
  </pattern>
</defs>
<rect x="30" y="30" width="240" height="80" fill="#3498db" stroke="url(#stroke-pattern)" stroke-width="10"/>