盒子大小已知。文本字符串长度未知。在不破坏其纵横比的情况下使文本适合框。
经过一晚上的谷歌搜索和阅读 SVG 规范，我很确定如果没有 JavaScript，这是不可能的。我能得到的最接近的是使用textLengthand lengthAdjusttext 属性，但这只会沿一个轴拉伸文本。
<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 = 500and的框height = 30，那么文本会一直增长到height == 30。
首先：刚刚看到答案并不能完全满足您的需求 - 它可能仍然是一种选择，所以我们开始吧：
您正确地观察到 svg 不直接支持自动换行。但是，您可能会受益foreignObject于作为 xhtml 片段包装器的元素，其中可以使用自动换行。
看看这个独立的演示（在线提供）：
<?xml version="1.0" encoding="utf-8"?>
<!-- SO: http://stackoverflow.com/questions/15430189/pure-svg-way-to-fit-text-to-a-box -->
<!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的 1em开始getBBoxfont-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>
您还可以添加textanchor="middle"和更改x位置以使您的文本完美居中
这不会改变字体大小，你会有奇怪的空间字母间距......