html - SVG：我需要一个读取“TEST”并自动扩展 100% 的 SVG 文件

Question

这是我拥有的文件。

<svg
   width="700"
   height="500">
  <g
     id="layer1">
    <text
       style="font-size:100%;font-family:Bitstream Vera Sans"
       x="6"
       y="37"
       id="">TEST</text>
  </g>
</svg>

我想TEST以某种方式自动占据整个事物。就像100％的东西。

现在由于 x 和 y 坐标，文本未对齐。

Answer 1

尝试设置viewBox而不是特定的宽度和高度：

<svg viewBox="0 0 240 70">
  <g id="layer1">
    <text
       style="font-size:100px;font-family:Bitstream Vera Sans"
       x="0"
       y="70"
       id="">TEST</text>
  </g>
</svg>

请注意，Chrome 与没有特定高度的 SVG 存在一些渲染不一致。