当前位置:知识文库 ❯ 图文

多媒体：SVG图案 - 完整教程与代码示例

一、教程简介

SVG <pattern> 元素允许创建可重复的图案，用于填充或描边图形。图案可以包含任意 SVG 内容（形状、文本、甚至其他图案），通过平铺方式覆盖整个填充区域。本教程将详细讲解 SVG 图案的创建、配置和使用方法。

二、核心概念

pattern 元素

<pattern> 定义在 <defs> 中，包含要重复的 SVG 内容，通过 url(#id) 引用。

图案属性

属性	说明	默认值
`x, y`	图案起始偏移	0
`width, height`	图案单元尺寸	0
`patternUnits`	图案坐标系统	objectBoundingBox
`patternContentUnits`	图案内容坐标系统	userSpaceOnUse
`patternTransform`	图案变换	无
`viewBox`	图案视图框	无

三、语法与用法

基本图案

代码示例

<defs>
  <pattern id="myPattern" width="20" height="20" patternUnits="userSpaceOnUse">
    <circle cx="10" cy="10" r="5" fill="#58a6ff" />
  </pattern>
</defs>
<rect width="300" height="200" fill="url(#myPattern)" />

patternUnits

userSpaceOnUse：width/height 使用用户空间像素值
objectBoundingBox：width/height 使用元素边界框的比例（0~1）

四、代码示例

示例1：SVG 图案全面演示

代码示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>SVG 图案全面演示</title>
  <style>
    body {
      margin: 0; padding: 20px;
      background: #0d1117; color: #c9d1d9;
      font-family: 'Segoe UI', sans-serif;
      display: flex; flex-direction: column; align-items: center;
    }
    svg { background: #161b22; border-radius: 8px; border: 1px solid #30363d; }
  </style>
</head>
<body>
  <h1>SVG 图案全面演示</h1>
  <svg width="750" height="500" viewBox="0 0 750 500">
    <defs>
      <!-- 棋盘格图案 -->
      <pattern id="checker" width="20" height="20" patternUnits="userSpaceOnUse">
        <rect width="10" height="10" fill="#1f2937" />
        <rect x="10" y="10" width="10" height="10" fill="#1f2937" />
        <rect x="10" width="10" height="10" fill="#374151" />
        <rect y="10" width="10" height="10" fill="#374151" />
      </pattern>

      <!-- 圆点图案 -->
      <pattern id="dots" width="20" height="20" patternUnits="userSpaceOnUse">
        <rect width="20" height="20" fill="#0f172a" />
        <circle cx="10" cy="10" r="3" fill="#58a6ff" />
      </pattern>

      <!-- 斜线图案 -->
      <pattern id="diagonal" width="10" height="10" patternUnits="userSpaceOnUse">
        <rect width="10" height="10" fill="#0f172a" />
        <path d="M 0 10 L 10 0" stroke="#3fb950" stroke-width="1" />
        <path d="M -2 2 L 2 -2" stroke="#3fb950" stroke-width="1" />
        <path d="M 8 12 L 12 8" stroke="#3fb950" stroke-width="1" />
      </pattern>

      <!-- 十字图案 -->
      <pattern id="cross" width="16" height="16" patternUnits="userSpaceOnUse">
        <rect width="16" height="16" fill="#0f172a" />
        <path d="M 8 2 V 14 M 2 8 H 14" stroke="#e9456080" stroke-width="1" />
      </pattern>

      <!-- 波浪图案 -->
      <pattern id="wave" width="30" height="15" patternUnits="userSpaceOnUse">
        <rect width="30" height="15" fill="#0f172a" />
        <path d="M 0 10 Q 7.5 0 15 10 Q 22.5 20 30 10" fill="none" stroke="#d2a8ff60" stroke-width="1" />
      </pattern>

      <!-- 菱形图案 -->
      <pattern id="diamond" width="20" height="20" patternUnits="userSpaceOnUse">
        <rect width="20" height="20" fill="#0f172a" />
        <path d="M 10 0 L 20 10 L 10 20 L 0 10 Z" fill="#f8b50020" stroke="#f8b50040" stroke-width="0.5" />
      </pattern>

      <!-- 六边形图案 -->
      <pattern id="hexagon" width="30" height="26" patternUnits="userSpaceOnUse">
        <rect width="30" height="26" fill="#0f172a" />
        <path d="M 15 0 L 30 7.5 L 30 18.5 L 15 26 L 0 18.5 L 0 7.5 Z" fill="none" stroke="#58a6ff30" stroke-width="0.5" />
      </pattern>

      <!-- 渐变图案 -->
      <linearGradient id="patGrad" x1="0%" y1="0%" x2="100%" y2="0%">
        <stop offset="0%" stop-color="#e94560" />
        <stop offset="100%" stop-color="#58a6ff" />
      </linearGradient>
      <pattern id="gradPat" width="40" height="40" patternUnits="userSpaceOnUse">
        <rect width="40" height="40" fill="#0f172a" />
        <rect x="5" y="5" width="30" height="30" rx="5" fill="url(#patGrad)" opacity="0.3" />
      </pattern>
    </defs>

    <!-- 图案展示 -->
    <g font-size="11" fill="#8b949e" text-anchor="middle">
      <!-- 第一行 -->
      <rect x="10" y="30" width="170" height="100" rx="6" fill="url(#checker)" />
      <text x="95" y="22">棋盘格</text>

      <rect x="195" y="30" width="170" height="100" rx="6" fill="url(#dots)" />
      <text x="280" y="22">圆点</text>

      <rect x="380" y="30" width="170" height="100" rx="6" fill="url(#diagonal)" />
      <text x="465" y="22">斜线</text>

      <rect x="565" y="30" width="170" height="100" rx="6" fill="url(#cross)" />
      <text x="650" y="22">十字</text>

      <!-- 第二行 -->
      <rect x="10" y="170" width="170" height="100" rx="6" fill="url(#wave)" />
      <text x="95" y="162">波浪</text>

      <rect x="195" y="170" width="170" height="100" rx="6" fill="url(#diamond)" />
      <text x="280" y="162">菱形</text>

      <rect x="380" y="170" width="170" height="100" rx="6" fill="url(#hexagon)" />
      <text x="465" y="162">六边形</text>

      <rect x="565" y="170" width="170" height="100" rx="6" fill="url(#gradPat)" />
      <text x="650" y="162">渐变图案</text>
    </g>

    <!-- 图案描边 -->
    <text x="375" y="305" text-anchor="middle" font-size="13" fill="#58a6ff" font-weight="bold">图案描边</text>
    <rect x="100" y="315" width="250" height="60" rx="10" fill="none" stroke="url(#dots)" stroke-width="6" />
    <circle cx="550" cy="345" r="40" fill="none" stroke="url(#diagonal)" stroke-width="6" />

    <!-- 图案文字 -->
    <text x="375" y="420" text-anchor="middle" font-size="13" fill="#58a6ff" font-weight="bold">图案填充文字</text>
    <text x="375" y="470" text-anchor="middle" font-size="48" font-weight="bold" fill="url(#dots)">
      Pattern
    </text>
  </svg>
</body>
</html>

五、浏览器兼容性

所有现代浏览器完整支持 SVG pattern，包括 IE9+。

六、注意事项与最佳实践

1. patternUnits 与 patternContentUnits

代码示例

<!-- 推荐：两者都使用 userSpaceOnUse，坐标一致 -->
<pattern id="p1" width="20" height="20"
         patternUnits="userSpaceOnUse"
         patternContentUnits="userSpaceOnUse">
  <circle cx="10" cy="10" r="5" fill="red" />
</pattern>

2. 图案尺寸选择

代码示例

<!-- 小尺寸 = 密集图案 -->
<pattern width="10" height="10" patternUnits="userSpaceOnUse">

<!-- 大尺寸 = 稀疏图案 -->
<pattern width="40" height="40" patternUnits="userSpaceOnUse">

3. 图案变换

代码示例

<pattern id="rotated" width="20" height="20" patternUnits="userSpaceOnUse"
         patternTransform="rotate(45)">
  <line x1="0" y1="10" x2="20" y2="10" stroke="#58a6ff" stroke-width="1" />
</pattern>

4. 图案嵌套

图案中可以引用其他图案或渐变，实现复杂的填充效果。

七、代码规范示例

代码示例

<!-- 推荐：图案定义规范 -->
<defs>
  <pattern id="pattern-dots"
           width="16" height="16"
           patternUnits="userSpaceOnUse"
           patternContentUnits="userSpaceOnUse">
    <rect width="16" height="16" fill="#0f172a" />
    <circle cx="8" cy="8" r="2" fill="#58a6ff" />
  </pattern>
</defs>

八、常见问题与解决方案

常见问题

图案显示不正确或间距不对？

原因是 patternUnits 和 patternContentUnits 不一致。解决方案是统一使用 userSpaceOnUse。

图案在不同大小的元素上显示不同？

原因是 objectBoundingBox 模式下图案相对于元素边界框。解决方案是使用 userSpaceOnUse 模式。

如何用图案填充文字？

使用 fill="url(#patternId)" 属性即可将图案应用到文字的填充中，实现图案文字效果。

如何旋转或变换图案？

使用 patternTransform 属性，支持 rotate()、scale()、translate() 等变换函数。

九、总结

SVG 图案是创建重复填充效果的重要工具，关键要点：

pattern：定义可重复的图案单元
patternUnits：控制图案坐标系统
patternContentUnits：控制图案内容坐标系统
patternTransform：图案变换（旋转、缩放等）
任意内容：图案可包含形状、文本、渐变等
可复用：通过 url(#id) 引用

下一教程将介绍 SVG 滤镜的使用。

标签： SVG图案 pattern标签重复填充图案单元 SVG教程棋盘格图案

本文涉及AI创作

内容由AI创作，请仔细甄别

当前位置:知识文库 ❯ 图文

多媒体：SVG图案 - 完整教程与代码示例

目录

一、教程简介

二、核心概念

pattern 元素

图案属性

三、语法与用法

基本图案

代码示例

patternUnits

四、代码示例

示例1：SVG 图案全面演示

代码示例

五、浏览器兼容性

六、注意事项与最佳实践

1. patternUnits 与 patternContentUnits

代码示例

2. 图案尺寸选择

代码示例

3. 图案变换

代码示例

4. 图案嵌套

七、代码规范示例

代码示例

八、常见问题与解决方案

常见问题

九、总结

快速访问

相关推荐

框架集成：01 HTML与前端框架概述 - 详细教程与实战指南

实战项目：项目10：个人作品集网站 - 详细教程与实战指南

实战项目：项目09：任务管理应用 - 详细教程与实战指南

实战项目：项目08：天气应用界面 - 详细教程与实战指南

list快速访问

poll相关推荐

框架集成：01 HTML与前端框架概述 - 详细教程与实战指南

实战项目：项目10：个人作品集网站 - 详细教程与实战指南

实战项目：项目09：任务管理应用 - 详细教程与实战指南

实战项目：项目08：天气应用界面 - 详细教程与实战指南

快速访问

相关推荐