代码之家 › 专栏 › 技术社区 › Jacopo Sciampi

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

svg

Jacopo Sciampi · 技术社区 · 7 年前

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

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

我有一个生成这个svg的函数。问题是文本不适合方框;结果如下:

(由于Chrome inspector是蓝色的,您可以在左上角看到文本很小,而不是全尺寸。

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

2 回复 | 直到 7 年前

Paul LeBeau 7 年前

你要么必须:

viewBox 文本,或
将文本调整到 .

font-size .

也许您可以使用字体加载库来获取有关字体中字形的元数据。然后用这种方法计算一段文字的大小。你没有提到你用哪种语言来制作这些SVG,所以我不能就此提出进一步的建议。

textLength 和 lengthAdjust <text> 元素。

文本长度
长度调整

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

看到了吗 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

enxaneta 7 年前

这是我的解决方案:我将文本放入 <symbol> . 我知道文本的大小 getBBox() 用它来设置 viewBox 对于 <symbol> <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>