如何在SVG中实现多个圆形的水平居中？

SVG 不支持 HTML 中的 text-align: center 属性，这是你设置后没效果的核心原因。下面是几种可行的解决方式：

方法一：用 <g> 标签包裹 + transform 平移 #

将所有圆形放在 <g> 组内，通过 calc() 计算平移距离，让整个组在 SVG 容器中水平居中。需要先算出图形组的总宽度（这里四个圆的总宽度是 80px，从最左圆的左边缘 0px 到最右圆的右边缘 80px）。

<svg width="100%" height="20" style="background-color: green;">
  <g transform="translate(calc((100% - 80px)/2), 0)">
    <circle cx="10" cy="10" r="10" fill="red" />
    <circle cx="30" cy="10" r="10" fill="blue" />
    <circle cx="50" cy="10" r="10" fill="grey" />
    <circle cx="70" cy="10" r="10" fill="yellow" />
  </g>
</svg>

方法二：使用 viewBox + preserveAspectRatio #

通过 viewBox 定义图形的坐标范围，再用 preserveAspectRatio="xMidYMid meet" 让图形自动在 SVG 容器中居中。这里图形的范围是 x:0~80、y:0~20，刚好覆盖所有圆形。

<svg width="100%" height="20" viewBox="0 0 80 20" preserveAspectRatio="xMidYMid meet" style="background-color: green;">
  <circle cx="10" cy="10" r="10" fill="red" />
  <circle cx="30" cy="10" r="10" fill="blue" />
  <circle cx="50" cy="10" r="10" fill="grey" />
  <circle cx="70" cy="10" r="10" fill="yellow" />
</svg>

方法三：动态计算（适配可变数量的圆形） #

如果圆形数量不固定，用 JavaScript 计算总宽度后动态调整位置：

<svg id="circleSvg" width="100%" height="20" style="background-color: green;">
  <g id="circleGroup">
    <circle cy="10" r="10" fill="red" />
    <circle cy="10" r="10" fill="blue" />
    <circle cy="10" r="10" fill="grey" />
    <circle cy="10" r="10" fill="yellow" />
  </g>
</svg>
<script>
const group = document.getElementById('circleGroup');
const circles = group.querySelectorAll('circle');
const radius = parseFloat(circles[0].getAttribute('r'));
const spacing = 20; // 圆之间的间距（示例中为20px）

// 计算每个圆的位置
let currentX = radius;
circles.forEach(circle => {
  circle.setAttribute('cx', currentX);
  currentX += spacing;
});

// 计算总宽度并平移组
const totalWidth = currentX - radius;
const svgWidth = document.getElementById('circleSvg').clientWidth;
const translateX = (svgWidth - totalWidth) / 2;
group.setAttribute('transform', `translate(${translateX}, 0)`);
</script>

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