javascript - SVG 文本位于矩形奇怪的布局之上

Question

我尝试将 SVG 文本(当然包装在 <text> 中)放置在 SVG <rect> 上.

我想让它看起来像是在我的矩形中居中的文本。

但奇怪的是我到了那里，它看起来不像我想象的那样。

看起来像这样

当我以为它会是那样的时候

这有什么问题吗？

首先我认为等于x和 y在<text>和 <rect>会工作，但就像下图所示

我认为 y="50%" in text 将强制文本在中间某处锚定。但我只能在 y="80%" 处实现如您所见。

原始标记在这里

<svg height="500" width="500" class="ng-scope">

  <svg height="50" width="393.703125" y="0">

    <g>
      <rect x="0" y="0" height="50" width="393.703125" style="fill: #A8A8A8">
      </rect>
      <text font-family="Airal" font-size="45" x="0" y="50%" inline-size="200">
        TEST TEXT IN SVG
      </text>
    </g>
  </svg>

</svg>

Answer 1

y 属性默认应用于文本bottom line - 因此文本的 y 位置和行的 y 位置之间存在差异、矩形或其他形状。

您可以使用 alignment-baseline 属性，例如用 middle 来达到更好的效果。 Here's the w3c description有更多选择。

<svg height="500" width="500" class="ng-scope">

  <svg height="50" width="393.703125" y="0">

    <g>
      <rect x="0" y="0" height="50" width="393.703125" style="fill: #A8A8A8">
      </rect>
      <text font-family="Airal" font-size="45" x="0" y="50%" inline-size="200" alignment-baseline="middle">
        TEST TEXT IN SVG
      </text>
    </g>
  </svg>

</svg>