用AI做循环图案：对齐四边，再用九宫格找接缝

想给网页背景、卡片衬底做一套自己的重复图案，单看一张小方块很容易漏掉接缝：一片叶子越过左边，右边若少半片，铺开就会断。本次让文字AI按坐标生成叶片与圆点，完成一份可编辑的240×240单元SVG，再用720×720九宫格检查四边和四角。

这组图形与提示词是原创教学设计。参考文件已做坐标检查、Inkscape命令行渲染和单对象改色验证；未调用在线AI生成，也未做浏览器或Inkscape桌面界面的端到端实测。下面保留完整参考文本，实际操作仍需在你的软件上验收。

开始前：只发送虚构几何，不必买生图套餐

准备一个可用的中文文字AI、纯文本编辑器、浏览器和Inkscape。文字AI入口可从DeepSeek官网进入网页版，也可以用已有、当地可用且获准使用的服务。这次不调用API，不输入API密钥。

DeepSeek的官方App发布公告曾说明App免费，但那是2025年1月的公告；当前账号资格、功能和额度仍以页面为准，本文未登录核验。练习无需购买生图套餐，遇到收费提示可先停下，直接用下方参考文件继续。

Inkscape是以SVG为主要格式的开源矢量编辑器，见官方项目说明。可从官方下载页选择系统；1.4.4发布通知列出了Windows、macOS和Linux。本轮本地验证使用已有的1.4版本，不把它称为最新版。

只把本例坐标和色号交给在线AI，不上传客户未公开纹样、品牌素材或个人照片。DeepSeek隐私政策说明会处理输入内容，并提供退出模型训练的设置；退出训练不代表完全不处理或不留存。软件免费也不会替第三方素材解决授权问题，本练习不使用品牌图案或现成插画。

一、先配对四边，再考虑图案好不好看

本例左上角为(0,0)，向右是x，向下是y，单元宽高都是240个SVG用户单位，不是240毫米。W3C的viewBox说明解释了内部坐标与显示视口的映射。

跨边形状要在对边放一个准确平移的副本，不要旋转或镜像。先核对这三组：

• 左右叶片：左叶片的端点是(-20,60)、(20,60)，控制点是(0,30)、(0,90)。右侧对应端点是(220,60)、(260,60)，控制点是(240,30)、(240,90)。每个x都加240，每个y都不变。
• 上下圆点：中心从(150,0)移到(150,240)，半径都为11，颜色相同；只给y加240。
• 四角圆点：中心为(0,0)、(240,0)、(0,240)、(240,240)，半径都为6。内部四块单元相遇时，四个四分之一应合成一个完整圆。

画布里面另放两片叶子和两个圆点。这四个物体没有触边，不需要补副本。整份单元共1个背景矩形、4条叶片路径、8个圆；多出来的边界副本是构成连续图案的一部分。

二、让AI生成母版和同源九宫格

把下面整段提交给文字AI。AI负责把几何条件写成重复结构，不能把“已经无缝”当作检测结果。两份文件要同时保留，后面修改母版时还要同步预览。

请用中文说明，并输出两个完整的静态 SVG 文本文件。不要调用图片生成，不要输出位图或网页。
目标：一份可独立编辑的叶片与圆点循环图案单元，以及严格使用同一组图形的3×3平铺预览。

坐标单位全部为SVG用户单位，不是毫米。
文件1 leaf-dot-tile.svg：width="240" height="240" viewBox="0 0 240 240" overflow="hidden"。
文件2 leaf-dot-3x3.svg：width="720" height="720" viewBox="0 0 720 720" overflow="hidden"；使用一个pattern，id="leaf-dot"，x=0,y=0,width=240,height=240，patternUnits="userSpaceOnUse"，viewBox="0 0 240 240"，overflow="hidden"；用720×720矩形和fill="url(#leaf-dot)"填满。

两份文件中的单元必须完全相同，顺序如下：
- 背景矩形(0,0,240,240)，填色#F7F2E8。
- 绿色左边界叶片，id=edge-leaf-left，d="M -20 60 Q 0 30 20 60 Q 0 90 -20 60 Z"，填色#356859。
- 同一叶片向右平移240个单位的副本，id=edge-leaf-right。只给每个x加240，全部y、颜色不变；不旋转、不镜像。
- 陶土色上边界圆点，id=edge-dot-top，cx=150,cy=0,r=11，填色#D8876B；在cy=240放完全相同副本id=edge-dot-bottom。
- 四角各一绿色圆点，中心(0,0)、(240,0)、(0,240)、(240,240)，r=6，填色#356859。ID依次为corner-0-0、corner-240-0、corner-0-240、corner-240-240。
- 内部绿色叶片inner-leaf-a：d="M 70 156 Q 96 120 122 156 Q 96 192 70 156 Z"。
- 内部绿色叶片inner-leaf-b：d="M 150 102 Q 172 72 194 102 Q 172 132 150 102 Z"。
- 内部陶土色圆点inner-dot-a：cx=58,cy=106,r=7；inner-dot-b：cx=186,cy=194,r=9。

只允许svg、title、desc、defs、pattern、rect、path、circle；所有图形使用不透明纯色填充，不使用描边。文件1的图形必须是直接可编辑的独立元素，不放进pattern。文件2必须完整写出同一组图形，不能省略或引用另一个文件。
禁止script、事件属性、外链、CSS/style、href、use、image、foreignObject、text、字体、动画、滤镜、蒙版、DTD和实体。除本地fill="url(#leaf-dot)"外不得含其他url()。不添加线框、水印、装饰、商标、隐藏内容或“此处省略”。

先列出横向、纵向、四角的对应关系；再分别输出两份完整SVG；最后给出需要由人实际完成的验收清单。不要声称已在浏览器、Inkscape或打印机中实测。若不能满足某条，明确指出，不要擅自改尺寸。

预览里的pattern宽高固定为240，填充区域为720×720，因此能看到三行三列。W3C的pattern说明规定了patternUnits的坐标系作用；这里明确设为userSpaceOnUse，并用相同的viewBox定位内容，避免周期随目标矩形的外框比例变化。它负责重复单元，接缝是否连续仍要检查。

三、用完整参考文件建立基准

以下是编辑提供的参考，不是某次AI调用的实测输出。每份只复制从<svg到</svg>的内容，以UTF-8纯文本分别保存为leaf-dot-tile.svg和leaf-dot-3×3.svg，确认文件名没有多出.txt。

SVG能包含脚本和外部资源。对AI的新输出，先核对是否符合提示词限定；遇到script、事件属性、外链、image、foreignObject或不认识的结构，停止打开，要求重写或回到参考文件。唯一需要的url()是引用本文件图案的url(#leaf-dot)。关键词检查不是通用安全认证，不要关闭系统或浏览器防护。

<svg xmlns="http://www.w3.org/2000/svg" width="240" height="240" viewBox="0 0 240 240" overflow="hidden">
  <title>Original leaf and dot repeat tile</title>
  <desc>Editorial reference fixture. Pure vector shapes. Not an AI service output.</desc>
  <rect id="background" x="0" y="0" width="240" height="240" fill="#F7F2E8"/>
  <path id="edge-leaf-left" d="M -20 60 Q 0 30 20 60 Q 0 90 -20 60 Z" fill="#356859"/>
  <path id="edge-leaf-right" d="M 220 60 Q 240 30 260 60 Q 240 90 220 60 Z" fill="#356859"/>
  <circle id="edge-dot-top" cx="150" cy="0" r="11" fill="#D8876B"/>
  <circle id="edge-dot-bottom" cx="150" cy="240" r="11" fill="#D8876B"/>
  <circle id="corner-0-0" cx="0" cy="0" r="6" fill="#356859"/>
  <circle id="corner-240-0" cx="240" cy="0" r="6" fill="#356859"/>
  <circle id="corner-0-240" cx="0" cy="240" r="6" fill="#356859"/>
  <circle id="corner-240-240" cx="240" cy="240" r="6" fill="#356859"/>
  <path id="inner-leaf-a" d="M 70 156 Q 96 120 122 156 Q 96 192 70 156 Z" fill="#356859"/>
  <path id="inner-leaf-b" d="M 150 102 Q 172 72 194 102 Q 172 132 150 102 Z" fill="#356859"/>
  <circle id="inner-dot-a" cx="58" cy="106" r="7" fill="#D8876B"/>
  <circle id="inner-dot-b" cx="186" cy="194" r="9" fill="#D8876B"/>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" width="720" height="720" viewBox="0 0 720 720" overflow="hidden">
  <title>Three by three original repeat preview</title>
  <desc>Editorial reference fixture. Nine 240-unit repeats. Not a product screenshot.</desc>
  <defs>
    <pattern id="leaf-dot" x="0" y="0" width="240" height="240" patternUnits="userSpaceOnUse" viewBox="0 0 240 240" overflow="hidden">
      <rect id="background" x="0" y="0" width="240" height="240" fill="#F7F2E8"/>
  <path id="edge-leaf-left" d="M -20 60 Q 0 30 20 60 Q 0 90 -20 60 Z" fill="#356859"/>
  <path id="edge-leaf-right" d="M 220 60 Q 240 30 260 60 Q 240 90 220 60 Z" fill="#356859"/>
  <circle id="edge-dot-top" cx="150" cy="0" r="11" fill="#D8876B"/>
  <circle id="edge-dot-bottom" cx="150" cy="240" r="11" fill="#D8876B"/>
  <circle id="corner-0-0" cx="0" cy="0" r="6" fill="#356859"/>
  <circle id="corner-240-0" cx="240" cy="0" r="6" fill="#356859"/>
  <circle id="corner-0-240" cx="0" cy="240" r="6" fill="#356859"/>
  <circle id="corner-240-240" cx="240" cy="240" r="6" fill="#356859"/>
  <path id="inner-leaf-a" d="M 70 156 Q 96 120 122 156 Q 96 192 70 156 Z" fill="#356859"/>
  <path id="inner-leaf-b" d="M 150 102 Q 172 72 194 102 Q 172 132 150 102 Z" fill="#356859"/>
  <circle id="inner-dot-a" cx="58" cy="106" r="7" fill="#D8876B"/>
  <circle id="inner-dot-b" cx="186" cy="194" r="9" fill="#D8876B"/>
    </pattern>
  </defs>
  <rect id="repeat-area" x="0" y="0" width="720" height="720" fill="url(#leaf-dot)"/>
</svg>

先用本地文件打开方式查看九宫格。在x=240、480的两条竖向接缝以及y=240、480的两条横向接缝检查：叶片轮廓有无台阶、圆点是否完整、底色是否出现条带。四个内部交点也要看，不能只看画面中心。需要辅助线时另加临时检查图层，成品不保留格线。

四、故意错移8单位，看看为什么只重复还不够

复制一份九宫格作为错误练习，只把id为edge-leaf-right的路径d改成：

M 220 68 Q 240 38 260 68 Q 240 98 220 68 Z

这个右侧副本相对左侧变成了(240,8)，所以在接缝处，一半叶片比另一半低8个单位。它仍然每240单位重复，九格也能完全一样，却有明显台阶。仅检查“九块是否相同”抓不到这个错误。

修复时不要模糊边缘或加粗描边。把右侧叶片所有y恢复为对应值，正确路径应为：

M 220 60 Q 240 30 260 60 Q 240 90 220 60 Z

也可把失败原因交回AI，只要求修这一处：

检查发现edge-leaf-right相对edge-leaf-left的位移是(240,8)，本练习需要(240,0)。请只修复右侧叶片的所有y坐标，使它等于左侧对应y；同步修复单元文件与3×3文件。不要改其他对象、颜色、周期、尺寸或文件结构。列出你实际改动的属性。结果仍标记为待我复查。

收到修订后重新对照母版与预览的路径。此例接缝x=0和x=240处，叶片的绿色范围应同为y=45到75；上、下边陶土色圆点的范围同为x=139到161。这里的45和75是二次曲线实际边界，不是控制点的30和90。完整路径的平移关系也要核对，不能只凭边上颜色相似通过。

五、改一片内部叶子，并同步九宫格

在Inkscape中用“打开”读取单元母版，先选内部叶片inner-leaf-a改填色。它不跨边，适合第一次练习。官方基础教程介绍了选择独立对象与填充、描边操作；具体菜单译名以安装版本为准。另存副本，再打开确认仍能选中单片叶子，而不是只能选到一张图片。

如果只能选中一个大矩形，先检查是否打开了九宫格pattern预览；若导入的是PNG，选到的就是位图。请回到单元SVG。Inkscape保存后可能增加应用元数据，这和AI未经要求添加未知主动内容不是同一件事。

母版改完，预览不会自动跟着变。在纯文本编辑器中，把母版从背景矩形到inner-dot-b的13个图形元素，完整替换到预览的<pattern>与</pattern>之间。保留pattern原有的id、240宽高、viewBox和外层720画布，不把整个svg根节点嵌进去。再次查看预览，确认改色已经出现且没有丢图形。

以后改跨边物体时，要同时改对应副本；四角圆点需改四处。改形、改色都适用。若让AI代为同步，也要检查它有没有顺便改周期或重新排版。不能用旧九宫格为新母版验收。

六、通过这份清单，再把素材用于设计

• 母版为240×240，预览为720×720，pattern周期仍为240；两份文件的13个图形一致。
• 左右叶片准确平移(240,0)，上下圆点准确平移(0,240)，四角圆点齐全；配对形状、半径和颜色一致。
• 两条内部竖缝、两条内部横缝和四个内部交点都检查过；放大看轮廓，缩小看整体有无意外条带。
• 母版能选择并修改一个独立矢量对象；另存后重新打开仍可编辑，最新预览已同步。
• 没有把辅助网格带入素材；保留SVG母版，不用PNG覆盖。

需要PNG单元时，在Inkscape选择页面范围导出240×240像素。不要选“绘图范围”或把页面自动适配到绘图：跨边对象保留了画布外的完整部分，可能把导出范围撑大。没有位图需求时直接保留SVG即可。

如果某个缩放比例出现细线，先核对坐标和周期，再看其他整数倍率与实际导出。抗锯齿显示与真实几何错位需分开判断，不要随意扩大单元或用重叠掩盖。放进最终排版软件后也要复查；该软件若不支持SVG图案填充，可以用已验收的PNG单元，但它不再提供路径编辑能力。

常见卡点怎么恢复

• AI只给图片：重新要求完整静态SVG文本和独立path、circle，不能把图片改后缀当矢量。
• 越界部分被删：恢复完整形状及对边副本；只把图案缩回中间会丢掉本轮要练的边界情况。
• 四角缺一块：核对四个中心，不能只补上、下两处。
• 预览空白：检查pattern的id与fill引用是否同为leaf-dot、尺寸是否非零、代码是否复制完整；不要启用脚本来修。
• 改色后接缝显现：检查是否只改了一个边界副本，统一配对对象后再同步预览。
• AI改动太多：回到上一份合格母版，只修已定位的坐标或颜色；无法确认时标记“未验收”。

最后应保留一份可编辑单元、一份与它一致的九宫格，以及本轮改动记录。想继续制作按尺寸排列的实物标签，可以另看一页收纳标签练习。

资料核查：2026年10月20日。本参考的正确九宫格在Inkscape 1.4命令行渲染为720×720像素，与独立按格点展开的参考图逐像素一致；故意错移8单位的反例被坐标检查识别。另做了CLI按ID改一片叶子填色并导出SVG的验证，结果保留4条路径、8个圆、没有嵌入位图。上述结果只针对本样例和本地验证条件，不代表在线AI输出、GUI操作、所有查看器或印刷效果已经测试。