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

Question

我一直在尝试获取具有特定宽度和高度的文本元素的矩形 SVG。

我有 top 和 left 的输出值 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，而不是四个。

此外，您还为<text> 元素提供了x 和y 属性并且 您还提供了<tspan> x 和dy 参数。

正因为如此，我不确定您实际想要达到的目标。如果您只是想在页面上定位这两条文本，那么您真的只需要其中一种技术，而不是全部三种。

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

  <text fill="#000000"
        x="219" y="109"
        text-anchor="middle" font-size="90.75" font-family="Twine">Hello</text>

  <text fill="#000000"
        x="207" y="180"
        text-anchor="middle" font-size="90.75" font-family="Twine">Tetst</text>
    
</svg>`