直方奇怪布局上方的SVG文本

Question

我尝试在SVG <text>上创建SVG文本（当然包含在<rect>中）。

我想让它看起来像我的矩形文本。

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

看起来像这样

当我认为它看起来像那样

那有什么不对？

首先，我认为x中的y和<text>相等，而<rect>会有效，但如下图所示

我认为文本中的y="50%"会强制文本在中间的某个地方出现。但是我可以在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属性默认应用于文本底线 - 因此文本的y位置与线条，矩形的y位置之间存在差异，或其他形状。

您可以使用alignment-baseline属性，例如使用middle来获得更好的结果。 Here's the w3c description还有更多选项。

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

添加viewBox。我再也不是svg的专家，做过一些工作，但这可能有用。

＆＃13;

＆＃13;

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

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

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

＆＃13;

＆＃13;

＆＃13;