已知盒子大小，文本字符串长度未知。将文本适应于盒子而不破坏其纵横比。
经过一晚的谷歌搜索和阅读SVG规范，我很确定这是无法在JavaScript的情况下实现的。我能做到的最接近的方式是使用textLength和lengthAdjust文本属性，但那样只会沿一个轴向拉伸文本。
<svg width="436" height="180"
style="border:solid 6px"
xmlns="http://www.w3.org/2000/svg">
<text y="50%" textLength="436" lengthAdjust="spacingAndGlyphs">UGLY TEXT</text>
</svg>
我没有找到直接在没有 JavaScript 的情况下完成它的方法，但我找到了一个相当容易的 JS 解决方案，不需要 for 循环也不需要修改字体大小，适合所有尺寸，即文本增长到最短边界限为止。
基本上，我使用 transform 属性，计算所需大小和当前大小之间的正确比例。
这是代码：
<?xml version="1.0" encoding="UTF-8" ?>
<svg version="1.2" viewBox="0 0 1000 1000" width="1000" height="1000" xmlns="http://www.w3.org/2000/svg" >
<text id="t1" y="50" >MY UGLY TEXT</text>
<script type="application/ecmascript">
var width=500, height=500;
var textNode = document.getElementById("t1");
var bb = textNode.getBBox();
var widthTransform = width / bb.width;
var heightTransform = height / bb.height;
var value = widthTransform < heightTransform ? widthTransform : heightTransform;
textNode.setAttribute("transform", "matrix("+value+", 0, 0, "+value+", 0,0)");
</script>
</svg>在前面的例子中，文本会增长直到width == 500，但是如果我使用width = 500和height = 30的框大小，则文本将增长直到height == 30。
font-size设置为1 (1em在我们的情况下)；然后一旦你有了比例因子(value在这个回答中)，就将font-size设置为它。请参见下面的示例。 - Izhaki首先：刚看到答案并没有精确地解答您的需求-但可能仍然是一个选项，因此我们来试试：
你正确地观察到SVG不能直接支持换行。但是，您可以从foreignObject元素中受益，它可以作为xhtml片段的包装器，在那里可以使用换行。
请查看这个自包含演示（在线可用online）:
<?xml version="1.0" encoding="utf-8"?>
<!-- SO: https://dev59.com/zWUp5IYBdhLWcg3wNVhb -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xhtml="http://www.w3.org/1999/xhtml"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1"
width="20cm" height="20cm"
viewBox="0 0 500 500"
preserveAspectRatio="xMinYMin"
style="background-color:white; border: solid 1px black;"
>
<title>simulated wrapping in svg</title>
<desc>A foreignObject container</desc>
<!-- Text-Elemente -->
<foreignObject
x="100" y="100" width="200" height="150"
transform="translate(0,0)"
>
<xhtml:div style="display: table; height: 150px; overflow: hidden;">
<xhtml:div style="display: table-cell; vertical-align: middle;">
<xhtml:div style="color:black; text-align:center;">Demo test that is supposed to be word-wrapped somewhere along the line to show that it is indeed possible to simulate ordinary text containers in svg.</xhtml:div>
</xhtml:div>
</xhtml:div>
</foreignObject>
<rect x="100" y="100" width="200" height="150" fill="transparent" stroke="red" stroke-width="3"/>
</svg>我已经开发了@Roberto的答案，但是我们不会对textNode进行转换（缩放），而是：
font-size为1emgetBBox计算比例尺font-size设置为该比例尺（你也可以使用1px等）
这里是执行此操作的React HOC：
import React from 'react';
import TextBox from './TextBox';
const AutoFitTextBox = TextBoxComponent =>
class extends React.Component {
constructor(props) {
super(props);
this.svgTextNode = React.createRef();
this.state = { scale: 1 };
}
componentDidMount() {
const { width, height } = this.props;
const textBBox = this.getTextBBox();
const widthScale = width / textBBox.width;
const heightScale = height / textBBox.height;
const scale = Math.min(widthScale, heightScale);
this.setState({ scale });
}
getTextBBox() {
const svgTextNode = this.svgTextNode.current;
return svgTextNode.getBBox();
}
render() {
const { scale } = this.state;
return (
<TextBoxComponent
forwardRef={this.svgTextNode}
fontSize={`${scale}em`}
{...this.props}
/>
);
}
};
export default AutoFitTextBox(TextBox);
我不认为这是你想要做的解决方案，但你可以使用textLength与百分比="100%"来实现全宽度。
<svg width="436" height="180"
style="border:solid 6px"
xmlns="http://www.w3.org/2000/svg">
<text x="0%" y="50%" textLength="100%">blabla</text>
</svg>
您还可以添加text-anchor="middle"并将x位置更改为完美居中您的文本
这不会改变字体大小，但会产生奇怪的空格字距...
<text x="50%" y="50%" textLength="100%" text-anchor="middle">AB</text>。 - jave.web
transform="scale(0,5)"）使其接近 - http://jsfiddle.net/G5L8W/ - streetlogics