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

Posted 2023-02-25

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

【英文标题】：How to get the svg text element in rectangle with particular width and height?

【发布时间】：2017-08-29 13:48:53

【问题描述】：

我一直在尝试获取具有特定宽度和高度的文本元素的矩形 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"   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"  ></rect>
          <g id="0.8354780427180231" transform="translate(0 0 219 109)">
         <text fill="#000000" stroke="none" stroke- 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- 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

【问题讨论】：

请让我们知道您到目前为止所做的尝试以及任何相关的研究。就目前的问题而言，它太宽泛了。

我尝试过的是在 php 中使用输出值动态创建 svg。我创建的上述代码一

【参考方案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"   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"  ></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>`

【讨论】：

如何像图片一样把文字放在左边

请检查我想要的输出文件

x 和y 元素的y 属性，设置位置。要将文本向左移动，请减小 x 属性。

我将输出元素设置为 top:22 left:175 如何使用这些元素设计文本

top 和 'left 不适用于像 <text> 这样的 SVG 元素。在这种情况下，您需要使用x 和y。