是否可以在 SVG 的 <g> 中居中对齐 <rect>？

Question

是否可以在不调整 <rect> 上的 y 属性的情况下将标签内的所有矩形垂直居中对齐？（例如，参见代码段）

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3/org/1999/xlink" viewBox="0 0 225 38" preserveAspectRatio="none" width="100%" height="100%">
  <g fill="black">
    <rect x="10" y="1" width="6" height="5" />
    <rect x="20" y="1" width="6" height="10" />
    <rect x="30" y="1" width="6" height="20" />
    <rect x="40" y="1" width="6" height="5" />
    <rect x="50" y="1" width="6" height="15" />
  </g>
</svg>

<h3>desired result</h3>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3/org/1999/xlink" viewBox="0 0 225 38" preserveAspectRatio="none" width="100%" height="100%">
  <g fill="black">
    <rect x="10" y="8" width="6" height="5" />
    <rect x="20" y="6" width="6" height="10" />
    <rect x="30" y="1" width="6" height="20" />
    <rect x="40" y="8" width="6" height="5" />
    <rect x="50" y="4" width="6" height="15" />
  </g>
</svg>

Answer 1

不，无法将 <rect> 个元素居中对齐。

但是可以 center-align <line> 元素并给它们一个 stroke-width（注意 viewBox 垂直居中于 0）：

<svg viewBox="0 -19 225 38" width="100%" height="100%">
  <g stroke="black">
    <line x1="10" x2="16" stroke-width="5" />
    <line x1="20" x2="26" stroke-width="10" />
    <line x1="30" x2="36" stroke-width="20" />
    <line x1="40" x2="46" stroke-width="5" />
    <line x1="50" x2="56" stroke-width="15" />
  </g>
</svg>

Answer 2

您还可以通过设置 transform: translate(0, -50%) css 规则实现垂直居中的 <rect> 元素。

此方法还需要 transform-box: fill-box;（或 content-box）属性。

所有 <rect> 元素都有一个 y="50%" 属性，从 svg viewBox 的垂直中心开始。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3/org/1999/xlink" viewBox="0 0 225 38"  width="100%" height="100%" style="border:1px solid #ccc">
  <style>
    rect {
      transform: translate(0, -50%);
      transform-origin: center;
      transform-box: fill-box;
    }
  </style>
  <g fill="black" >
    <rect x="10" y="50%" width="6" height="5" />
    <rect x="20" y="50%" width="6" height="10" />
    <rect x="30" y="50%" width="6" height="20" />
    <rect x="40" y="50%" width="6" height="5" />
    <rect x="50" y="50%" width="6" height="15" />
  </g>
</svg>

浏览器对 transform-box 的支持不错。 (See caniuse).
但是，如果您需要旧版浏览器（例如 ie11）支持，是一个更强大的解决方案。

是否可以在 SVG 的 <g> 中居中对齐 <rect>？

Is it possible to center align <rect>'s inside a <g> for SVG?

svg