Question

我的rect是200 x 200px，我想在svg元素中居中。所以我按照我在其他SO帖子上看到的flex样式（即display: flex; align-items: center; justify-content: center;）。但是，您可以看到矩形不居中，但文本是。

注意：我不允许使用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的方式做到这一点：

＆＃13;

    <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>

＆＃13;

解释

我们通过切换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>

为什么我的弹性箱不能使我的矩形居中？

2 个答案:

解释