Question

我有一个文本想要将其调整为svg容器的大小，并将其放置在中间（水平和垂直）。我在寻找相对的方式，而不是绝对的方式。到目前为止，我已经尝试将文本放入svg并使用viewBox属性以及transform：scale函数对其进行调整。

有什么标准方法可以做到吗？

更新：

在评论员的帮助下，我可以将文本放在svg容器的中间。谢谢！

但是，我仍然无法在中间插入多行文字。第二个代码段是我来到解决方案中最遥远的地方。

一行文本的工作代码：

<svg width="890" height="500"overflow="hidden;">
<g>
  <rect x="0" y="0" width="542" height="495" fill="#6fdd6f"></rect>
  <svg x="0" y="0" width="542" height="495" viewBox="0 0 100 100">      
      <text  alignment-baseline="middle" dominant-baseline="middle" text-anchor="middle" x="50%" y="50%">TXT</text>
  </svg>
</g>
</svg>

带有多行代码的代码需要调整为居中：

<svg width="890" height="500"overflow="hidden;">
<g>
  <rect x="0" y="0" width="542" height="495" fill="#6fdd6f"></rect>
  <svg x="0" y="0" width="542" height="495" viewBox="0 0 100 100">      
      <text alignment-baseline="middle" dominant-baseline="middle" text-anchor="middle" >
      <tspan x="50%" y="50%">TXT</tspan>
      <tspan dy="1em" x="50%" y="50%">more TXT</tspan>
      <tspan dy="2em" x="50%" y="50%">end of TXT</tspan>
      </text>
  </svg>
</g>
</svg>

如何在SVG中调整多行文字的大小并将其放置在中间

0 个答案: