纯SVG的方式来适应文本到一个盒子
箱大小已知。 文本string长度未知。 将文本适合框，而不破坏其长宽比。
经过一个晚上的谷歌search和阅读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> 
我知道SVG缩放文本，以适应容器和适合的文本到框中
我没有find一个方法来直接做没有Javascript，但我发现一个JS很容易的解决scheme，没有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 。
首先：只是看到答案并不能准确地解决你的需求 – 它可能仍然是一个select，所以在这里我们去：
你是正确的观察，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>
我不认为它是你想要做的解决scheme，但你可以使用textlenght百分比="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位置，以完美的中心你的文字
这不会改变字体大小，你会有奇怪的空间letterspacing …
JSFIDDLE DEMO
