以编程方式将文本修复到 viewBox

Question

我有这个 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>

size：viewBox 需要的参数，以便创建包装器。

width & height：文本容器的宽度和高度。

我有一个生成这个 svg 的函数。问题是文本不适合框；结果是这样的：

（由于 Chrome 检查器是蓝色的，您可以在左上角看到文本变小而不是全尺寸。

SVG 结果是这样的：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
     viewBox="0 0 580 532">
  <text x="0" y="15" style="font-family:Arial;fill:%230000ff;fill-opacity:1;font-weight:normal;font-style:normal;"
     >test</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;">

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

Answer 1

您必须：

1. 使viewBox 适合文本，或
2. 使文本适合viewBox。

你也没有这样做。你甚至没有设置font-size。

选项 1 对您来说并不真正可用。如果您可以访问 SVG DOM，则可以测量文本，但如果您不在呈现环境（如浏览器）中，则无法这样做。

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

所以您只剩下选项 2。SVG 必须让您将文本适应特定大小的唯一选项是 <text> 元素上的 textLength 和 lengthAdjust 属性。

• textLength

  设置文本适合的长度

• lengthAdjust

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

更多信息请参见the <text> section in the spec

没有调整文字高度的选项。

svg {
  width: 400px;
  background-color: linen;
}

<svg viewBox="0 0 200 40">
  <line x1="10" y1="30" x2="190" y2="30" stroke="black" opacity="0.2"/>
  <text x="10" y="30"
        textLength="180"
        lengthAdjust="spacing">Sample Text</text>
</svg>

<br/>

<svg viewBox="0 0 200 40">
  <line x1="10" y1="30" x2="190" y2="30" stroke="black" opacity="0.2"/>
  <text x="10" y="30"
        textLength="180"
        lengthAdjust="spacingAndGlyphs">Sample Text</text>
</svg>

如果您希望字体大小更好地匹配，那么您将不得不制定一种计算近似字体大小的方法。例如。

var  numChars = text.length()
var  fontSize = (desiredTextWidth / numChars) * someScalingFactor

缩放系数取决于您的字体。

Answer 2

这是我的解决方案：我将文本放在 <symbol> 中。我使用getBBox() 获得文本的大小，并使用它为<symbol> 设置viewBox。请注意，<use> 元素的宽度为 100%。

let bb = text.getBBox();
test.setAttributeNS(null, "viewBox", `${bb.x} ${bb.y} ${bb.width} ${bb.height}`);

*{font-size:16px;}
svg{border:1px solid;width:90vh}
body{font-family:Arial;fill:#0000ff;fill-opacity:1;font-weight:normal;font-style:normal;}

<svg  xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 580 532">
<symbol id="test">

<text id="text" dominant-baseline="central" text-anchor="middle" >test</text>
</symbol>   
<use id="_use" xlink:href="#test" width="100%" />
</svg>