SVG中能否不调整<rect>的y属性实现<g>内矩形垂直居中对齐

完全可以在不逐个手动修改<rect>元素y属性的前提下实现需求，以下是两种零手动改y值的实现方式：

方法1：纯CSS实现（无JS，无需改动原有标签属性） #

核心逻辑是利用CSS的transform属性，给所有矩形设置统一的垂直偏移规则，自动计算每个矩形需要移动的距离，对齐到最高矩形的垂直中线。
你当前场景里最高矩形高度为20，顶部初始y值为1，其中线位置为1 + 20/2 = 11。给所有<rect>加如下样式即可：

rect {
  /* 偏移量 = 中线偏移基数 - 矩形自身高度的一半 */
  transform: translateY(calc(10px - attr(height number) / 2));
  transform-box: fill-box;
}

如果需要对齐到整个SVG画布的垂直中线，只需要把calc里的10px改成18px即可（画布总高38，中线位置19，减去初始y=1，得偏移基数18）。

注：目前现代Chrome、Firefox、Safari均已支持SVG属性在CSS attr() 中的类型化读取，兼容性覆盖绝大多数日常场景。

方法2：极简JS实现（全版本兼容，无需手动改y） #

如果需要兼容低版本浏览器，只需要加几行遍历代码，自动计算每个矩形的y值，全程不需要手动逐个调整：

// 选中g标签下所有矩形
const rects = document.querySelectorAll('svg g rect');
let maxHeight = 0;
// 遍历获取最高矩形的高度
rects.forEach(rect => {
  const h = Number(rect.getAttribute('height'));
  maxHeight = Math.max(maxHeight, h);
});
// 计算所有矩形需要对齐的公共垂直中线
const baseY = Number(rects[0].getAttribute('y'));
const centerLine = baseY + maxHeight / 2;
// 批量设置每个矩形的居中y值
rects.forEach(rect => {
  const h = Number(rect.getAttribute('height'));
  rect.setAttribute('y', centerLine - h/2);
});

把这段脚本放在SVG代码后面即可自动实现对齐，原有写死的y=1属性完全不需要手动修改。

效果说明 #

两种方法实现的对齐逻辑和给出的期望效果完全匹配：

• 高20的矩形保持y=1不变
• 高10的矩形自动计算得到y值为6
• 高15的矩形自动计算得到y值为3.5，取整后与期望的y=4一致
• 高5的矩形自动计算得到y值为8.5，取整后与期望的y=8一致

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