SVG的元素是实现平铺底纹最直接、灵活的方式，纯矢量、可缩放、体积小，支持动态控制偏移、缩放和颜色；通过定义单元尺寸与图形，组合、、等构建点、线、网格等底纹，并利用patternTransform、x/y、CSS变量及内联SVG实现响应式与动态换肤。
SVG的<pattern></pattern>元素是实现平铺底纹最直接、灵活的方式，它不依赖外部图片，纯矢量、可缩放、体积小，且能动态控制偏移、缩放和颜色。
定义基础平铺图案
在<defs></defs>中声明<pattern></pattern>，通过width和height设定单个图形单元尺寸，patternUnits="userSpaceOnUse"确保单位与当前坐标系一致：
<svg width="200" height="200">
<defs>
<pattern id="dots" width="10" height="10" patternUnits="userSpaceOnUse">
<circle cx="5" cy="5" r="1" fill="#999"/>
</pattern>
</defs>
<rect x="0" y="0" width="200" height="200" fill="url(#dots)"/>
</svg>
这样就能生成10×10像素内一个灰色小圆点的无限重复底纹。
用<rect></rect>或<path></path>构建复杂单元
单个<pattern></pattern>内部可组合多个图形，实现斜线、网格、波点等常见底纹：
立即学习“前端免费学习笔记（深入）”；
- 45°斜线：用
<line></line>从(0,10)画到(10,0)，再设stroke="#ccc" stroke-width="1" - 方格网：两个
<rect></rect>，一个横向条（y=0, height=1），一个纵向条（x=0, width=1） - 双色波点：嵌套两个不同半径/颜色的
<circle></circle>，错开cx/cy模拟阴影效果
动态控制平铺效果的关键属性
除了基础尺寸，以下属性直接影响视觉表现：
-
patternTransform：支持rotate()、scale()、translate()，例如patternTransform="rotate(30)"让斜线转为30度 -
x/y：微调整个图案起始偏移，适合对齐容器边缘 -
viewBox+preserveAspectRatio：在响应式场景中保持图案比例不变形
适配响应式与CSS联动技巧
SVG图案天然适配缩放，但需注意几点：
- 避免在
<pattern></pattern>中使用百分比单位；所有尺寸用数值（如width="4"），靠父SVG缩放驱动整体效果 - 用CSS变量控制颜色：把
fill设为var(--dot-color, #666)，再用JS或CSS修改--dot-color即可换肤 - 配合
background-image: url("data:image/svg+xml,...")内联编码，可作为HTML元素的CSS背景，兼顾复用性与加载性能
