Question

我在svg中有一排固定大小的文本。

我试图通过减小字体大小（但不要大于指定的大小）来使文本始终显示，而不考虑文本的长度或父级的大小。

这可能吗？

<div style="width:100px;height:20px;resize:both;overflow:hidden">
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
<text font-size="15px" text-anchor="middle" dominant-baseline="middle" x="50%" y="50%">Dynamic Text</text>
</svg>
</div>

Answer 1

这是我的解决方案：我将文本放在<symbol>元素中，并在JavaScript中更改<symbol>元素的viewBox。之所以可行，是因为SVG元素的宽度和高度相同

sTxt.setAttributeNS(null,"viewBox",`0 0 100 ${txt.getComputedTextLength()}`)

svg{width:90vh;background:#d9d9d9;}

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<symbol id="sTxt" viewBox="0 0 100 16">
<text id="txt" text-anchor="middle" dominant-baseline="hanging" x="50" y="0">Dynamic Text soooo long</text>
</symbol>
  <use id="u" xlink:href="#sTxt" width="100" y="50" />
</svg>

如果SVG的宽度和高度不同，则必须考虑到这一点：

sTxt.setAttributeNS(null,"viewBox",`0 0 100 ${.5*txt.getComputedTextLength()}`)

svg{width:90vh;background:#d9d9d9;}

<svg viewBox="0 0 100 50" xmlns="http://www.w3.org/2000/svg">
<symbol id="sTxt" viewBox="0 0 100 16">
<text id="txt" text-anchor="middle" dominant-baseline="hanging" x="50" y="0">Dynamic Text soooo long</text>
</symbol>
  <use id="u" xlink:href="#sTxt" width="100" y="50%" />
</svg>

调整字体大小，使文本始终显示

1 个答案: