SVG缩放文本以适合容器

这可能是一个非常简单的问题，但是如何在SVG中获取文本以适应其容器？SVG缩放文本以适合容器

我不在乎它是否因拉伸太长或太高而看起来丑陋，但它需要适合其容器并尽可能大。

谢谢

来源

2010-05-30 Tom

viewbox attribute是你所需要的。

来源

2010-05-30 13:32:33 msw

甜蜜，完美的作品！起初我有点困惑 – Tom 2010-05-30 13:47:21

+22

你能举个例子吗？我不明白。视图框需要维度，我不知道我的文本有多宽。 – 2012-04-01 12:10:06

我认为这个答案是可变大小的容器，而不是可变大小的文本。 – algiecas 2012-08-23 12:30:36

如果你真的不在意文本变得难看，下面介绍如何将未知长度的文本放入已知宽度。

<svg width="436" height="180" 
    style="border:solid 6px" 
    xmlns="http://www.w3.org/2000/svg"> 
    <g> 
     <text y="50%" textLength="436" lengthAdjust="spacingAndGlyphs">UGLY TEXT</text> 
    </g> 
</svg>

enter image description here

来源

2013-03-15 10:46:36 Bemmu

这是否在IE中工作？似乎没有用，但我有很多其他的东西在玩。 – whyoz 2015-01-24 20:33:06

如果文字以空格开始或结束，则可能需要使用牢不可破的空格。 – 2017-02-17 14:05:36

也许这会为你工作。你必须调整值，但它调整大小，当父div调整。 Here's my dabblet example.它的工作方式与fittext.js相似

我使用了‘viewBox’ & ‘preserveAspectRatio’属性。

<svg><text x="50%" y="50%" dy=".3em">Look, I’m centered!</text></svg> 
<svg viewBox="-50 -50 100 100" preserveAspectRatio="xMidYMid meet"><text font-size="16" dy=".3em" >I’m also resizeable!</text></svg>

其他资源，我看了看：

来源

2013-03-24 10:28:10 Stoikerty

真棒主义yoschi，谢谢你 – zanona 2013-08-13 10:03:18

不客气。这是我对“互联网”的第一次贡献之一，所以我很高兴听到我能联系到某人。（我现在称为Stoikerty：P） – Stoikerty 2013-08-27 20:03:06

以下是我想出了...它类似于其他人张贴到了什么，但我认为它调整大小并很好地扩展。此代码将间距添加到大约10-25个字符之间的任何文本，以使其填充其父项的整个宽度。如果您需要更长或更短的文本，只需调整viewBox宽度和textLength属性即可。

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox='0 0 300 24'> 
 
<text textLength='290' lengthAdjust="spacing" x='5' y="14" > 
 
    Some Unknown Text that is resizing 
 
</text> 
 
</svg>

来源

2013-12-30 04:09:22 DiggityDug

SVG缩放文本以适合容器

回答

相关问题