xml SVG 缩放文本以适合容器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2938779/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
SVG Scaling Text to fit container
提问by Tom
This is likely a very simple question, but how do I get text in SVG to stretch to fit its container?
这可能是一个非常简单的问题，但是如何让 SVG 中的文本拉伸以适应其容器？
I don't care if it looks ugly from being stretched too long or high, but it needs to fits its container and be as big as possible.
我不在乎它是否因拉得太长或太高而看起来丑陋，但它需要适合它的容器并尽可能大。
Thanks
谢谢
采纳答案by Bemmu
If you really don't care that the text gets ugly, here's how to fit unknown length text into a known width.
如果您真的不在乎文本变得难看，这里是如何将未知长度的文本放入已知宽度的方法。
<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>
回答by DiggityDug
Here is what I have come up with... Its similar to what other people have posted, but I think it resizes and scales nicely. This code will add spacing to any text roughly between 10-25 characters to make it fill the entire width of its parent. If you need longer or shorter text, just adjust the viewBox width and textLength attributes.
这是我想出的......它类似于其他人发布的内容，但我认为它可以很好地调整大小和缩放比例。此代码将为任何文本添加大约 10-25 个字符之间的间距，以使其填充其父级的整个宽度。如果需要更长或更短的文本，只需调整 viewBox width 和 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>回答by Stoikerty
Maybe this could work for you. You'd have to tweak the values, but it does resize when the parent div resizes. Here's my dabblet example.It works similarly to fittext.js
也许这对你有用。您必须调整这些值，但它会在父 div 调整大小时调整大小。这是我的 dabblet 示例。它的工作原理类似于 fittext.js
I used the ‘viewBox'& ‘preserveAspectRatio'attributes.
我使用了“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>
other resources I looked at:
我查看的其他资源：
回答by lsblsb
You can use the textPathtag in conjunction with the texttag. If you then set the lengthAdjustattribute of the textPathtag to "spacingAndGlyphs"(you may additionally use the methodattribute and set it to "stretch"to adjust the rendering method).
您可以将textPath标签与text标签结合使用。如果然后将标签的lengthAdjust属性设置textPath为"spacingAndGlyphs"（您可以额外使用该method属性并将其设置为"stretch"来调整渲染方法）。
Example:
例子：
<div style="width: 100%">
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMin meet" viewBox="0 0 200 100"
style="border:solid 6px"
xmlns="http://www.w3.org/2000/svg">
<g>
<path id="svg-text" d="M 10 50 H 180" fill="transparent" stroke="lightgray" />
<text>
<textPath
xlink:href="#svg-text"
method="stretch"
lengthAdjust="spacingAndGlyphs"
>Beautifully resized!</textPath>
</text>
</g>
</svg>
<div>