响应式SVG能否在放大时不缩放元素仅调整元素间距？

要让SVG从60px宽放大到180px（3倍尺寸）后，只拉开圆形之间的间距、不放大圆形本身，直接用整体缩放肯定不行——那会连带着把圆形也放大3倍。这里给你两种靠谱的实现方式：

方案一：纯CSS搞定（不用改SVG结构） #

把所有圆形塞进一个<g>分组，先给分组做3倍缩放占满目标空间，再给每个圆形做反向缩放，把尺寸拉回原来的5px半径。

代码示例： #

svg {
  background-color: lightblue;
  /* 设置放大后的尺寸：原60x40的3倍 */
  width: 180px;
  height: 120px;
}

/* 给圆形分组做3倍缩放，填满SVG空间，同时拉开间距 */
.circle-group {
  transform: scale(3);
  /* 缩放原点设左上角，避免整体偏移 */
  transform-origin: top left;
}

/* 给每个圆形反向缩放，抵消分组的放大效果，保持5px半径 */
.circle-group circle {
  transform: scale(1/3);
  /* 缩放原点设圆心，保证圆形位置不跑偏 */
  transform-origin: center;
}

<p>放大3倍后（保持圆半径）:</p>
<svg viewBox="0 0 60 40" xmlns="http://www.w3.org/2000/svg">
  <g class="circle-group">
    <circle cx="10" cy="10" r="5"/>
    <circle cx="30" cy="10" r="5"/>
    <circle cx="50" cy="10" r="5"/>
    <circle cx="10" cy="30" r="5"/>
    <circle cx="30" cy="30" r="5"/>
    <circle cx="50" cy="30" r="5"/>
  </g>
</svg>

简单说下原理： #

1. 先缩放整个分组，让布局占满180x120的SVG空间，同时自然拉开圆形之间的间距；
2. 再给每个圆形反向缩放，抵消分组带来的尺寸放大，让半径回到原本的5px；
3. 调整transform-origin是为了保证元素位置不偏移，分组从左上角开始缩放，圆形从自己的圆心缩放。

方案二：直接改SVG坐标（更直观） #

如果你不需要动态调整，直接把圆形的cx、cy坐标乘以3，同时把SVG的尺寸和viewBox也改成3倍大小，r保持5px就行，连额外CSS都不用加。

代码示例： #

svg {
  background-color: lightblue;
  width: 180px;
  height: 120px;
}

<p>放大3倍后（调整坐标）:</p>
<svg viewBox="0 0 180 120" xmlns="http://www.w3.org/2000/svg">
  <circle cx="30" cy="30" r="5"/>
  <circle cx="90" cy="30" r="5"/>
  <circle cx="150" cy="30" r="5"/>
  <circle cx="30" cy="90" r="5"/>
  <circle cx="90" cy="90" r="5"/>
  <circle cx="150" cy="90" r="5"/>
</svg>

原理很简单： #

• 把SVG的viewBox改成0 0 180 120（原尺寸的3倍），同时设置实际宽高为180x120，让SVG里的1个单位等于1px；
• 把每个圆形的坐标乘以3，布局就均匀扩展了，而r还是5px，自然就实现了间距变大、圆形尺寸不变的效果。

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