是SVG中定义可重复填充图案的模板，必须置于内并设置id，通过fill="url(#id)"引用；其width/height设定图块尺寸，patternUnits推荐设为userSpaceOnUse以避免缩放异常。
什么是 <pattern></pattern>？它不是直接画出来的图案
<pattern></pattern> 本身不会在页面上显示任何内容，它只是一个“模板定义”——就像你提前刻好一个印章，之后用 fill="url(#myPattern)" 才真正盖印。没被引用的 <pattern></pattern> 完全无效。
它必须放在 <defs></defs> 里（否则多数浏览器会忽略），且需带 id 属性供后续引用。
<pattern></pattern> 的关键属性怎么设才不白忙
光写个空 <pattern></pattern> 标签没用，尺寸和坐标系统不配对，图案会错位、拉伸或完全看不见。
-
width和height：决定单个“图块”的宽高，单位是用户坐标系（不是像素）。设太小（如width="1"）可能因抗锯齿糊成一片；设太大（如width="200"）会导致图案稀疏 -
patternUnits="userSpaceOnUse"：推荐始终显式设置。默认是objectBoundingBox（按图形自身宽高比例缩放），极易引发意外缩放，尤其当你把同一<pattern></pattern>复用于不同大小图形时 -
x和y：控制图块左上角偏移，一般保持0即可；改了可能造成无缝衔接失败
在里面放什么？<rect></rect>、<circle></circle>、<path></path> 都行，但注意坐标原点
<pattern></pattern> 内部所有子元素的坐标，都是相对于该图块左上角（即 x=0, y=0）计算的，不是整个 SVG 画布。
常见错误：把 <circle cx="50" cy="50"></circle> 放进 width="10" height="10" 的 pattern 里 → 圆心超出图块范围，根本画不出来。
<svg width="200" height="200">
<defs>
<pattern id="dots" width="10" height="10" patternUnits="userSpaceOnUse">
<circle cx="5" cy="5" r="1" fill="#333"/>
</pattern>
</defs>
<rect x="10" y="10" width="150" height="150" fill="url(#dots)"/>
</svg>
为什么图案没显示？先查这三件事
90% 的“图案不出现”问题出在这三个地方：
-
<pattern></pattern>不在<defs></defs>内部（比如直接写在<g></g>或<svg></svg>顶层） - 引用时写成了
fill="url(#Dots)"（大小写错），而定义的id是"dots" - 图案内容（如
<circle></circle>）的fill是透明色、或用了未定义的<lineargradient></lineargradient>导致渲染失败
Chrome 开发者工具里检查 <pattern></pattern> 元素是否被解析（右键“检查”能看到它出现在 DOM 中），比猜更省时间。
