如何多次复制SVG并修改其坐标，生成例如3×3的网格布局？

嘿，这个需求其实挺常见的，我给你分享几种靠谱的实现方式，从纯静态SVG写法到动态生成都有，你可以根据自己的场景来选：

如果你的网格数量是固定的（比如题目里的3×3），直接用SVG的<use>元素复用基础图形就好，步骤很简单：

1. 把你的原始SVG放到<defs>标签里，给它一个唯一的ID，方便后续引用；
2. 用<use>标签多次引用这个基础图形，通过x和y属性设置每个实例的偏移位置。

举个完整的例子：

<svg width="300" height="300" xmlns="http://www.w3.org/2000/svg">
  <!-- 定义可复用的基础图形 -->
  <defs>
    <g id="base-shape">
      <!-- 这里替换成你自己的SVG内容 -->
      <circle cx="40" cy="40" r="30" fill="#42b983" />
      <rect x="25" y="25" width="30" height="30" fill="none" stroke="#fff" stroke-width="2" />
    </g>
  </defs>

  <!-- 手动生成3×3网格 -->
  <use href="#base-shape" x="0" y="0" />
  <use href="#base-shape" x="100" y="0" />
  <use href="#base-shape" x="200" y="0" />
  
  <use href="#base-shape" x="0" y="100" />
  <use href="#base-shape" x="100" y="100" />
  <use href="#base-shape" x="200" y="100" />
  
  <use href="#base-shape" x="0" y="200" />
  <use href="#base-shape" x="100" y="200" />
  <use href="#base-shape" x="200" y="200" />
</svg>

提示：这里我假设每个图形占100×100的空间，所以横向/纵向每次偏移100单位，你可以根据自己的图形尺寸调整这个数值。

如果需要支持任意数量的网格（比如用户输入n，生成n×n），用JavaScript动态创建<use>元素会更灵活：

<svg id="grid-svg" width="300" height="300" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <g id="base-shape">
      <!-- 替换成你的基础SVG -->
      <circle cx="40" cy="40" r="30" fill="#42b983" />
      <rect x="25" y="25" width="30" height="30" fill="none" stroke="#fff" stroke-width="2" />
    </g>
  </defs>
</svg>

<script>
  const svg = document.getElementById('grid-svg');
  const gridSize = 3; // 可以改成任意数字，比如5就是5×5网格
  const shapeWidth = 100; // 单个图形的宽度
  const shapeHeight = 100; // 单个图形的高度

  // 循环生成每行每列的图形
  for (let row = 0; row < gridSize; row++) {
    for (let col = 0; col < gridSize; col++) {
      // 创建SVG的use元素，注意要指定SVG命名空间
      const useElement = document.createElementNS('http://www.w3.org/2000/svg', 'use');
      useElement.setAttribute('href', '#base-shape');
      // 计算当前图形的x、y偏移
      useElement.setAttribute('x', col * shapeWidth);
      useElement.setAttribute('y', row * shapeHeight);
      svg.appendChild(useElement);
    }
  }
</script>

注意：创建SVG元素必须用createElementNS并指定SVG的命名空间，否则浏览器可能无法正确识别元素。

如果你想把图形作为重复图案填充一块区域，也可以用<pattern>元素，这种方式更适合做背景类的网格：

<svg width="300" height="300" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <!-- 定义重复图案单元 -->
    <pattern id="shape-pattern" width="100" height="100" patternUnits="userSpaceOnUse">
      <!-- 基础图形的坐标是相对于pattern内部的(0,0) -->
      <circle cx="40" cy="40" r="30" fill="#42b983" />
      <rect x="25" y="25" width="30" height="30" fill="none" stroke="#fff" stroke-width="2" />
    </pattern>
  </defs>

  <!-- 用图案填充整个SVG区域 -->
  <rect width="300" height="300" fill="url(#shape-pattern)" />
</svg>

这种方式不需要手动写多个<use>，浏览器会自动重复图案填充指定的矩形区域，非常省心。

内容的提问来源于stack exchange，提问作者lionel_hutz