SVG的标签怎么用 创建填充图案

是 SVG 中定义可重复填充图案的模板，必须置于内并设置 id，通过 fill=”url(#id)” 引用；其 width/height 设定图块尺寸，patternUnits 推荐设为 userSpaceOnUse 以避免缩放异常。

什么是 ？它不是直接画出来的图案

本身不会在页面上显示任何内容，它只是一个“模板定义”——就像你提前刻好一个印章，之后用 fill="url(#myPattern)" 才真正盖印。没被引用的 完全无效。

它必须放在 里（否则多数 浏览器 会忽略），且需带 id 属性供后续引用。

的关键属性怎么设才不白忙

光写个空 标签没用，尺寸和坐标系统不配对，图案会错位、拉伸或完全看不见。

• width 和 height：决定单个“图块”的宽高，单位是用户坐标系（不是像素）。设太小（如 width="1"）可能因抗锯齿糊成一片；设太大（如 width="200"）会导致图案稀疏
• patternUnits="userSpaceOnUse"：推荐始终显式设置。默认是 objectBoundingBox（按图形自身宽高比例缩放），极易引发意外缩放，尤其当你把同一 复用于不同大小图形时
• x 和 y：控制图块左上角偏移，一般保持 0 即可；改了可能造成无缝衔接失败

在里面放什么？、、 都行，但注意坐标原点

内部所有子元素的坐标，都是相对于该图块左上角（即 x=0, y=0）计算的，不是整个 SVG 画布。

常见错误：把 放进 width="10" height="10" 的 pattern 里 → 圆心超出图块范围，根本画不出来。

为什么 图案没显示？先查这三件事

90% 的“图案不出现”问题出在这三个地方：

• 不在 内部（比如直接写在 或 顶层）
• 引用时写成了 fill="url(#Dots)"（大小写错），而定义的 id 是 "dots"
• 图案内容（如 ）的 fill 是透明色、或用了未定义的 导致渲染失败

Chrome 开发者 工具 里检查 元素是否被解析（右键“检查”能看到它出现在 DOM 中），比猜更省时间。