如何从中心将SVG组#RectangleScaled按1.4倍缩放？平移异常求助

嘿，我完全懂你碰到的这个麻烦——想把<g id="RectangleScaled">元素以组的中心为基准放大1.4倍，用了公式但红色矩形的位置总是不对对吧？我来帮你拆解问题，一步步搞定它。

问题根源：中心计算或变换顺序出错 #

要实现围绕组中心的缩放，核心是要先把组的“原点”临时移到中心位置，缩放完成后再移回原位。但这里很容易踩两个坑：

• 中心坐标计算错误：很多人会直接用元素的x/y值当中心，而正确的中心应该是x + width/2、y + height/2（如果是矩形的话）；
• SVG变换顺序搞反：SVG的transform是从右往左执行的，顺序错了平移效果肯定不对。

正确的实现方式 #

静态写法（已知元素尺寸位置）

假设你的原始红色矩形是<rect x="100" y="100" width="200" height="150"/>，那它的中心坐标是：

• cx = 100 + 200/2 = 200
• cy = 100 + 150/2 = 175

把变换顺序写对，就能得到正确的缩放效果：

<svg width="500" height="500">
  <!-- 参考用的原始灰色矩形 -->
  <rect x="100" y="100" width="200" height="150" fill="#cccccc" />
  
  <!-- 以中心缩放1.4倍的红色矩形组 -->
  <g id="RectangleScaled" transform="translate(200, 175) scale(1.4) translate(-200, -175)">
    <rect x="100" y="100" width="200" height="150" fill="red" opacity="0.6" />
  </g>
</svg>

这里的变换执行顺序是：

1. 先执行最右侧的translate(-200, -175)：把组的中心移到SVG原点；
2. 然后执行scale(1.4)：以原点（也就是原来的组中心）为基准缩放；
3. 最后执行最左侧的translate(200, 175)：把缩放后的组移回原来的中心位置。

动态计算（适配任意尺寸位置的元素）

如果你的元素位置或尺寸是动态变化的，用JS自动计算中心会更靠谱：

const targetGroup = document.getElementById('RectangleScaled');
// 获取组的边界盒信息
const bbox = targetGroup.getBBox();
// 计算中心坐标
const centerX = bbox.x + bbox.width / 2;
const centerY = bbox.y + bbox.height / 2;
// 应用变换
targetGroup.setAttribute('transform', `translate(${centerX}, ${centerY}) scale(1.4) translate(${-centerX}, ${-centerY})`);

这样不管你的组里是什么元素，都能精准地以中心为基准缩放，再也不会出现平移错位的问题啦。

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