跳到主要内容

图案

图案（Pattern）是一种可重复的图形，用于填充或描边。与纯色和渐变不同，图案可以使用任意 SVG 图形作为填充内容，创建纹理、网格、条纹等效果。

图案基础​

图案使用 <pattern> 元素定义，放在 <defs> 元素内部。图案可以包含任何 SVG 图形元素。

<svg width="200" height="150" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <pattern id="dots" width="20" height="20" patternUnits="userSpaceOnUse">
      <circle cx="10" cy="10" r="5" fill="#3498db"/>
    </pattern>
  </defs>
  <rect x="10" y="10" width="180" height="130" fill="url(#dots)"/>
</svg>

pattern 元素属性​

属性说明默认值
id图案唯一标识符必需
width图案单元的宽度必需
height图案单元的高度必需
x图案起始 x 坐标0
y图案起始 y 坐标0
patternUnits定义图案坐标系统objectBoundingBox
patternContentUnits定义图案内容的坐标系统userSpaceOnUse

图案坐标系统​

patternUnits​

patternUnits 定义图案本身的坐标系统：

  • objectBoundingBox（默认）：使用图形边界框作为参考，x、y、width、height 值范围 0-1
  • userSpaceOnUse：使用 SVG 画布坐标系统
<svg width="300" height="150" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <pattern id="bbox" width="0.2" height="0.2" patternUnits="objectBoundingBox">
      <rect width="10" height="10" fill="#e74c3c"/>
    </pattern>
    <pattern id="user" width="20" height="20" patternUnits="userSpaceOnUse">
      <rect width="10" height="10" fill="#3498db"/>
    </pattern>
  </defs>
  <rect x="10" y="10" width="130" height="60" fill="url(#bbox)"/>
  <rect x="160" y="10" width="130" height="60" fill="url(#user)"/>
</svg>

patternContentUnits​

patternContentUnits 定义图案内部内容的坐标系统：

  • userSpaceOnUse（默认）：使用 SVG 画布坐标系统
  • objectBoundingBox：使用图形边界框作为参考
<svg width="300" height="150" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <pattern id="contentUser" width="20" height="20" patternUnits="userSpaceOnUse">
      <circle cx="10" cy="10" r="8" fill="#2ecc71"/>
    </pattern>
    <pattern id="contentBbox" width="0.2" height="0.2" 
             patternUnits="objectBoundingBox" patternContentUnits="objectBoundingBox">
      <circle cx="0.1" cy="0.1" r="0.08" fill="#9b59b6"/>
    </pattern>
  </defs>
  <rect x="10" y="10" width="130" height="60" fill="url(#contentUser)"/>
  <rect x="160" y="10" width="130" height="60" fill="url(#contentBbox)"/>
</svg>

常用图案示例​

条纹图案​

<svg width="300" height="100" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <pattern id="stripes" width="10" height="10" patternUnits="userSpaceOnUse" 
             patternTransform="rotate(45)">
      <rect width="5" height="10" fill="#3498db"/>
    </pattern>
  </defs>
  <rect x="10" y="10" width="280" height="80" fill="url(#stripes)"/>
</svg>

使用 patternTransform 旋转图案可以创建斜条纹效果。

网格图案​

<svg width="300" height="150" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <pattern id="grid" width="30" height="30" patternUnits="userSpaceOnUse">
      <rect width="30" height="30" fill="#fff"/>
      <rect width="30" height="1" fill="#bdc3c7"/>
      <rect width="1" height="30" fill="#bdc3c7"/>
    </pattern>
  </defs>
  <rect x="10" y="10" width="280" height="130" fill="url(#grid)" stroke="#95a5a6"/>
</svg>

棋盘图案​

<svg width="300" height="150" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <pattern id="checkerboard" width="40" height="40" patternUnits="userSpaceOnUse">
      <rect width="40" height="40" fill="#ecf0f1"/>
      <rect width="20" height="20" fill="#bdc3c7"/>
      <rect x="20" y="20" width="20" height="20" fill="#bdc3c7"/>
    </pattern>
  </defs>
  <rect x="10" y="10" width="280" height="130" fill="url(#checkerboard)"/>
</svg>

波点图案​

<svg width="300" height="150" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <pattern id="polkadot" width="30" height="30" patternUnits="userSpaceOnUse">
      <circle cx="15" cy="15" r="8" fill="#e74c3c"/>
    </pattern>
  </defs>
  <rect x="10" y="10" width="280" height="130" fill="#fff" stroke="#e74c3c"/>
  <rect x="10" y="10" width="280" height="130" fill="url(#polkadot)"/>
</svg>

波浪图案​

<svg width="300" height="100" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <pattern id="waves" width="50" height="20" patternUnits="userSpaceOnUse">
      <path d="M 0 10 Q 12.5 0, 25 10 T 50 10" 
            fill="none" stroke="#3498db" stroke-width="2"/>
    </pattern>
  </defs>
  <rect x="10" y="10" width="280" height="80" fill="url(#waves)"/>
</svg>

六边形图案​

<svg width="300" height="150" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <pattern id="hexagon" width="56" height="100" patternUnits="userSpaceOnUse">
      <path d="M 28 0 L 56 17 L 56 50 L 28 67 L 0 50 L 0 17 Z" 
            fill="none" stroke="#2ecc71" stroke-width="1"/>
      <path d="M 28 67 L 56 84 L 56 117 L 28 134 L 0 117 L 0 84 Z" 
            fill="none" stroke="#2ecc71" stroke-width="1" transform="translate(-28, -67)"/>
    </pattern>
  </defs>
  <rect x="10" y="10" width="280" height="130" fill="url(#hexagon)"/>
</svg>

嵌套图案​

图案可以嵌套使用，一个图案可以引用另一个图案：

<svg width="300" height="150" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <pattern id="smallDots" width="10" height="10" patternUnits="userSpaceOnUse">
      <circle cx="5" cy="5" r="2" fill="#fff"/>
    </pattern>
    <pattern id="stripesBg" width="20" height="20" patternUnits="userSpaceOnUse">
      <rect width="10" height="20" fill="#3498db"/>
      <rect x="10" width="10" height="20" fill="#2980b9"/>
    </pattern>
    <pattern id="combined" width="20" height="20" patternUnits="userSpaceOnUse">
      <rect width="20" height="20" fill="url(#stripesBg)"/>
      <rect width="20" height="20" fill="url(#smallDots)"/>
    </pattern>
  </defs>
  <rect x="10" y="10" width="280" height="130" fill="url(#combined)"/>
</svg>

图案变换​

使用 patternTransform 属性可以对图案进行变换：

<svg width="300" height="150" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <pattern id="squares" width="20" height="20" patternUnits="userSpaceOnUse">
      <rect width="15" height="15" fill="#9b59b6"/>
    </pattern>
    <pattern id="rotated" width="20" height="20" patternUnits="userSpaceOnUse" 
             patternTransform="rotate(45)">
      <rect width="15" height="15" fill="#e74c3c"/>
    </pattern>
    <pattern id="scaled" width="20" height="20" patternUnits="userSpaceOnUse" 
             patternTransform="scale(0.5)">
      <rect width="15" height="15" fill="#2ecc71"/>
    </pattern>
  </defs>
  <rect x="10" y="10" width="80" height="60" fill="url(#squares)"/>
  <rect x="110" y="10" width="80" height="60" fill="url(#rotated)"/>
  <rect x="210" y="10" width="80" height="60" fill="url(#scaled)"/>
</svg>

图案与描边​

图案不仅可以用于填充，也可以用于描边：

<svg width="300" height="100" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <pattern id="strokePattern" width="8" height="8" patternUnits="userSpaceOnUse">
      <rect width="4" height="8" fill="#e74c3c"/>
      <rect x="4" width="4" height="8" fill="#3498db"/>
    </pattern>
  </defs>
  <rect x="20" y="20" width="260" height="60" rx="10"
        fill="none" stroke="url(#strokePattern)" stroke-width="10"/>
</svg>

实用示例​

砖墙纹理​

<svg width="300" height="150" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <pattern id="brick" width="60" height="30" patternUnits="userSpaceOnUse">
      <rect width="60" height="30" fill="#c0392b"/>
      <rect x="0" y="0" width="29" height="14" fill="#e74c3c" rx="1"/>
      <rect x="31" y="0" width="29" height="14" fill="#e74c3c" rx="1"/>
      <rect x="-15" y="16" width="29" height="14" fill="#e74c3c" rx="1"/>
      <rect x="16" y="16" width="29" height="14" fill="#e74c3c" rx="1"/>
      <rect x="47" y="16" width="29" height="14" fill="#e74c3c" rx="1"/>
    </pattern>
  </defs>
  <rect x="10" y="10" width="280" height="130" fill="url(#brick)"/>
</svg>

水波纹效果​

<svg width="300" height="150" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <pattern id="water" width="60" height="20" patternUnits="userSpaceOnUse">
      <path d="M 0 10 Q 15 5, 30 10 T 60 10" 
            fill="none" stroke="#3498db" stroke-width="1" opacity="0.5"/>
      <path d="M 0 15 Q 15 10, 30 15 T 60 15" 
            fill="none" stroke="#3498db" stroke-width="1" opacity="0.3"/>
    </pattern>
  </defs>
  <rect x="10" y="10" width="280" height="130" fill="#ecf0f1"/>
  <rect x="10" y="10" width="280" height="130" fill="url(#water)"/>
</svg>

透明度网格​

常用于图像编辑软件中表示透明区域：

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <pattern id="transparency" width="20" height="20" patternUnits="userSpaceOnUse">
      <rect width="10" height="10" fill="#ccc"/>
      <rect x="10" width="10" height="10" fill="#fff"/>
      <rect y="10" width="10" height="10" fill="#fff"/>
      <rect x="10" y="10" width="10" height="10" fill="#ccc"/>
    </pattern>
  </defs>
  <rect width="200" height="200" fill="url(#transparency)"/>
</svg>

小结​

图案是 SVG 中创建重复纹理和背景的有力工具。通过组合基本形状和使用变换，可以创建各种复杂的图案效果。图案可以用于填充和描边，也可以嵌套使用。理解 patternUnits 和 patternContentUnits 的区别对于正确控制图案大小和位置至关重要。