SVG无缝纹理需用<pattern>精确定义平铺单元，设patternUnits="userSpaceOnUse"确保固定尺寸，内部图形坐标以(0,0)为原点，通过fill="url(#id)"调用，支持patternTransform变换。

SVG 图形用 `` 填充复杂无缝纹理，核心不在“画满整个区域”，而在于精确定义一个能自然平铺、边缘对齐的图形单元（tile）。只要这个单元内部图形位置、尺寸与单元边界严格匹配，浏览器就会自动无限重复，形成真正无缝的效果。

必须放在 里，并用 url(#id) 正确引用

所有 `` 必须嵌套在 `

• ID 名称区分大小写，只用字母、数字、下划线，不能有空格或特殊字符
• 语法必须完整：`fill="url(#dots)"`，漏掉 `url()`、`#` 或拼错 ID 都会导致填充失败（图形显示为默认黑/透明）
• 同一个 pattern 可被多个图形复用，比如柱状图的每根柱子、面积图的不同区块

patternUnits="userSpaceOnUse" 是无缝前提

这是最关键的设置。默认 `patternUnits="objectBoundingBox"` 会让 width/height 解释为被填充图形宽高的百分比，导致同一图案在不同大小图形上缩放不一、错行断纹。改为 `userSpaceOnUse` 后：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• `width="12"` 和 `height="12"` 就是固定 12×12 用户坐标单位（通常是像素），平铺节奏恒定
• 内部所有子元素（如 ``、``）的坐标都以该单元左上角 (0,0) 为原点
• 例如：单元为 12×12，想居中画一个圆，就写 ``；若写 `cx="50"`，圆心超出范围，会被裁剪

用基础图形组合构建常见无缝纹理

单个 `` 内可嵌套任意 SVG 图形，无需外部资源。关键靠尺寸与坐标的精准配合：

• 波点底纹：`` 放在 12×12 单元中心，间距均匀不重叠
• 45° 斜线格：``，起点终点刚好撑满对角，无缝衔接
• 方格网：两个 `` —— ``（横线），``（竖线）
• 双层错位波点：叠加两个 ``，第二个 `cx="8" cy="8"`，半径略小、颜色略浅，模拟阴影偏移感

用 patternTransform 微调角度与密度

不需要改内部每个图形，用 `patternTransform` 直接对整个图形单元做变换，高效又可控：

• 斜线旋转：`patternTransform="rotate(45)"`，配合 `` 就生成整齐斜条纹
• 缩放纹理：`patternTransform="scale(0.7)"` 让原有单元变密，适合细颗粒效果
• 多变换叠加：`patternTransform="rotate(30) scale(1.2)"`，空格分隔，顺序影响结果
• 注意：它作用于整个 tile，不是其中某个子元素