如何在具有特定宽度和高度的矩形中获取svg文本元素？

Question

我一直在尝试使用带有文本元素的矩形形状的SVG，它具有特定的宽度和高度。

我有顶部和左边的输出值为hello是top：22left：175  并且测试是top：195left：116这些值如何获得所需的输出svg文件

如果我给文本元素赋予x和y零，它不会从矩形的角落开始

    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="500" height="500" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" version="1.0">
        <rect style="fill:none;stroke:#373435;stroke-width:2.08346" width="500" height="500"></rect>
          <g id="0.8354780427180231" transform="translate(0 0 219 109)">
         <text fill="#000000" stroke="none" stroke-width="0" stroke-linecap="round" stroke-linejoin="round" x="219" y="109" text-anchor="middle" font-size="90.75" font-family="Twine" data-textcurve="0" data-itemzoom="1 1">        
      <tspan dy="0" x="49%">Hello</tspan>
    </text>
    </g>
    <g id="0.2922376764472574" transform="translate(0 0 207 109)">
     <text fill="#000000" stroke="none" stroke-width="0" stroke-linecap="round" stroke-linejoin="round" x="207" y="109" text-anchor="middle" font-size="90.75" font-family="Twine" data-textcurve="0" data-itemzoom="1 1"><tspan dy="0" x="49%">Tetst</tspan>
      </text>
        </g>

</svg>`

SVG文件的所需输出应如下所示：

但我的输出是这样的 enter image description here

Answer 1

你想在这做什么？

transform="translate(0 0 219 109)"

translate()转换函数有两个参数x和y，而不是四个。

此外，您为x元素提供了y和<text>属性和，您还提供了<tspan> { {1}}和x个参数。

由于这一切，我不确定你实际想要实现的目标。如果你只是想在页面上放置两段文字，那么你真的只需要其中一种技术，而不是全部三种。

＆＃13;

＆＃13;

dy

＆＃13;

＆＃13;

＆＃13;