SVG复杂几何拼贴核心是在单个<svg>内用<defs>+<use>复用单元、单<path>多子路径合并绘制、<g>分组+transform网格布局，需统一原点、设viewBox、慎用Z闭合。

用 SVG 实现复杂几何图形拼贴，核心不是“堆叠多个 SVG 标签”，而是**在单个 `

用 `` + `` 复用基础单元

把重复出现的几何单元（如菱形、六边形、箭头、花瓣）定义在 `` 中，再用 `` 引用并变换位置/角度/缩放，避免重复写 d 属性。

• 例如定义一个边长为 20 的正六边形：

<defs>
  <path id="hex" d="M20,0 L10,17.3 -10,17.3 -20,0 -10,-17.3 10,-17.3 Z" />
</defs>

• 然后横向拼贴 4 个，间隔 30px：

<use href="#hex" x="0" />
<use href="#hex" x="30" />
<use href="#hex" x="60" />
<use href="#hex" x="90" />

支持 `transform="rotate(30) translate(50,50)"`，适合做环形拼贴或错位阵列。

用单条 `` 绘制多个不相交子路径

一个 `` 的 `d` 属性可包含多段独立路径，每段以 `M` 开头，用 `Z` 单独闭合——这样既能共用 fill/stroke 样式，又比多个 `` 更轻量。

立即学习“前端免费学习笔记（深入）”；

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

• 比如拼贴 3 个分离的三角形：

<path d="M10 10 L30 10 L20 30 Z M50 10 L70 10 L60 30 Z M90 10 L110 10 L100 30 Z" fill="#4a90e2" />

注意：各段之间用空格分隔，不要用逗号；每段 `M` 是新起点，互不影响坐标系。

用 `` 分组 + `transform` 实现网格化布局

对一组图形（如一个图标模块：圆+内部路径+文字）包裹在 `` 中，再用 `transform="translate(x,y)"` 或 `transform="scale(0.8) rotate(15)"` 整体定位与变形，方便批量排布。

• 例如生成 3×3 菱形网格：

<g id="tile">
  <path d="M0,-20 L20,0 L0,20 L-20,0 Z" fill="#f06" />
</g>
<use href="#tile" transform="translate(0,0)" />
<use href="#tile" transform="translate(40,0)" />
<use href="#tile" transform="translate(80,0)" />
<use href="#tile" transform="translate(0,40)" />
…

配合 JS 动态生成时，直接循环拼接 `` 字符串即可，无需操作 DOM 节点。

保持拼贴精度的关键细节

拼贴失准常因坐标偏移或单位混淆导致，需注意三点：

• 统一坐标原点：所有 `` 或 `` 的 `transform` 基准是自身左上角（0,0），建议把基础图形中心设为 (0,0)，再用 `transform="translate(x,y)"` 精确定位
• 显式设置 viewBox：`
• 路径末尾不用 Z 强行闭合非闭合图形：拼贴中若某单元本就是开放折线（如波浪线），就别加 Z，否则可能引入意外短线

不复杂但容易忽略。