为什么我的 flexbox 没有使我的矩形居中？

Question

我有一个 200 x 200 像素的 rect，我想将其置于 svg 元素的中心。所以我遵循了我在其他 SO post（即 display: flex; align-items: center; justify-content: center;）上看到的 flex 样式。但是，正如您所见，矩形未居中，但文本居中。

注意：我不允许使用 Javascript，只能提交 HTML 文档，所以这就是为什么我在 HTML

中做所有事情的原因

<svg height="200" width="100%" fill="red" style="display: flex; align-items: center; justify-content: center;">
    <g>
      <rect x="0" y="0" height="200" width="200" style="fill: red"/>
      <text x="50%" y="50%" alignment-baseline="middle" text-anchor="middle" font-family="Palantino" fill="black">Text</text>
    </g>
  </svg>

Answer 1

SVG 没有从 CSS 获得它的样式。

你必须按照 svg 的方式来做：

    <svg height="200" width="100%" fill="red" style="display: flex; align-items: center; justify-content: center;">
      <g>
        <rect  transform="translate(-100)" x="50%" y="0" height="200" width="200" style="fill: red"/>
        <text x="50%" y="50%" alignment-baseline="middle" text-anchor="middle" font-family="Palantino" fill="black">Text</text>
      </g>
    </svg>

说明

我们通过切换 x 轴将正方形向左移动 50%，然后使用平移变换减去其宽度的一半 (100px)，使其成为完美的中心。

Answer 2

我认为您不能使用 Flex 来布置 SVG 中的形状和东西。但是，您可以使用 Flex 和 HTML.

对 SVG 本身进行布局

这是一个例子：

<div style="height: 200px; width: 100%; display: flex; align-items: center; justify-content: center;">
  <svg height="200" width="200" fill="red">
    <g>
      <rect x="0" y="0" height="200" width="200" style="fill: red"/>
      <text x="50%" y="50%" alignment-baseline="middle" text-anchor="middle" font-family="Palantino" fill="black">Text</text>
    </g>
  </svg>
</div>

为什么我的 flexbox 没有使我的矩形居中？

Why is my flexbox not centering my rectangle?

html

svg

flexbox

rect

说明