SVG 中 g 元素居中：深入解析！

导言

在 SVG（可缩放矢量图形）中，g 元素是一个用于对组内其他元素进行分组和转换的容器元素。当需要对一组元素进行居中操作时，正确理解和应用 CSS transform 属性至关重要。

CSS transform 的魔力

transform 属性允许我们对元素进行平移、旋转、缩放和其他转换。通过结合 translate 和 transform-box 属性，我们可以轻松地将 g 元素居中。

水平居中

g {
  transform: translate(-50%, 0);
}

• translate(-50%, 0): 将 g 元素水平平移其自身宽度的 50%，从而使其水平居中。

垂直居中

g {
  transform: translate(0, -50%);
}

• translate(0, -50%): 将 g 元素垂直平移其自身高度的 50%，从而使其垂直居中。

同时水平和垂直居中

g {
  transform: translate(-50%, -50%);
}

• translate(-50%, -50%): 同时将 g 元素水平和垂直平移其自身宽度和高度的 50%，从而使其在水平和垂直方向上都居中。

transform-box 属性

transform-box 属性指定元素的变换原点。默认情况下，变换原点位于元素的左上角。通过设置 transform-box: fill-box;，我们可以将变换原点更改为元素的边界框中心。

g {
  transform: translate(-50%, -50%);
  transform-box: fill-box;
}

示例

让我们看一个简单的示例，展示如何使用 CSS transform 将 SVG 中的 g 元素水平和垂直居中。

<svg width="200" height="100">
  <g transform="translate(-50%, -50%)">
    <rect x="50" y="25" width="100" height="50" fill="blue" />
  </g>
</svg>

结论

通过使用 CSS transform 和 transform-box 属性，我们可以轻松地将 SVG 中的 g 元素水平、垂直或同时水平和垂直居中。这些技术提供了灵活性和控制力，使我们能够创建出精确对齐和美观的 SVG 图形。