Svg 以编程方式将文本固定到viewBox中

我有一个svg：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
     viewBox="0 0 ' + size + ' ' + size +'" width="'+ boxW +'" height="'+ boxH +'">
  <text>Sample Text</text>
</svg>

整个img是这样的：

<img src="data:image/svg+xml;charset=UTF-8,&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 580 532&quot;&gt;&lt;text x=&quot;0&quot; y=&quot;15&quot; style=&quot;font-family:Arial;fill:%230000ff;fill-opacity:1;font-weight:normal;font-style:normal;&quot;&gt;test&lt;/text&gt;&lt;/svg&gt;" class="leaflet-marker-icon leaflet-zoom-animated leaflet-interactive" alt="" tabindex="0" style="margin-left: -298px; margin-top: -291px; width: 309px; height: 295px; transform: translate3d(683px, 317px, 0px); z-index: 317; outline: none;">

所以我的问题是：如何将文本放入主包装中？

您必须：

将

视图框

与文本匹配，或

将文本适配到

视图框

你也没有这样做。您甚至没有设置

字体大小

选项1实际上不适用于您。如果可以访问SVG DOM，则可以测量文本，但如果不在渲染环境（如浏览器）中，则无法测量文本

也许您可以使用字体加载库来获取有关字体中字形的元数据。然后用这种方法计算一段文字的大小。您没有提到生成这些SVG所使用的语言，因此我无法就此提供进一步建议

因此，剩下的是选项2。SVG允许您将文本适合特定大小的唯一选项是

元素上的

textLength

和

lengthAdjust

属性

• textLength

  设置要安装文本的长度

• lengthAdjust

  设置用于调整长度的方法。您可以只拉伸字母之间的间距，也可以拉伸字母图示符

有关更多信息，请参阅

没有用于调整文本高度的选项

svg{
宽度：400px；
背景色：亚麻布；
}

示例文本


示例文本

这是我的解决方案：我将文本放入

中。我使用

getBBox（）

获取文本的大小，并使用它为

设置

视图框。请注意，
元素的宽度为100%


let bb=text.getBBox（）；
test.setAttributeNS（null，“viewBox”、`${bb.x}${bb.y}${bb.width}${bb.height}`）
*{字体大小：16px；}
svg{边框：1px实心；宽度：90vh}
正文{字体系列：Arial；填充：#0000ff；填充不透明度：1；字体重量：正常；字体样式：正常；}

测试
顶部的示例代码与问题后面列出的任何示例输出都不匹配。谢谢。这解决了我的问题。可悲的事实是，文本的高度现在工作正常。绿色的文字是“456”，但像这样伸展伤感怎么办？你怎么能把像“456”这样的短字符串塞进这么宽的长度呢。你希望文本看起来像什么？
<img src="data:image/svg+xml;charset=UTF-8,&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 580 532&quot;&gt;&lt;text x=&quot;0&quot; y=&quot;15&quot; style=&quot;font-family:Arial;fill:%230000ff;fill-opacity:1;font-weight:normal;font-style:normal;&quot;&gt;test&lt;/text&gt;&lt;/svg&gt;" class="leaflet-marker-icon leaflet-zoom-animated leaflet-interactive" alt="" tabindex="0" style="margin-left: -298px; margin-top: -291px; width: 309px; height: 295px; transform: translate3d(683px, 317px, 0px); z-index: 317; outline: none;">