如果您的意思是您希望文本完全填充任意宽度和高度,那么在 SVG 中确实没有一种简单的方法可以做到这一点。您不能在<text>
元素上指定宽度和高度。至少在当前的 SVG 规范 (1.1) 中没有。
然而,有几种方法可以通过一些技巧来实现这种效果。
一种方法是按照您的建议使用转换:
<svg>
<text font-size="10px" font-family="Verdana" transform="translate(99,400) scale(3.5,13.7)">SQUASHED TEXT</text>
<rect x="100" y="300" width="300" height="100" fill="none" stroke="red" />
</svg>
第二种方法是使用内部<svg>
元素并设置 viewBox 以匹配文本的边界。然后你设置preserveAspectRatio="none"
.
<svg>
<svg x="100" y="100" width="300" height="100" viewBox="0.2 -7.3 86 7.3" preserveAspectRatio="none" overflow="visible">
<text font-size="10px" font-family="Verdana">SQUASHED TEXT</text>
</svg>
<rect x="100" y="100" width="300" height="100" fill="none" stroke="red" />
</svg>
这种方式比较冗长,但它的优点是一旦你为一段文本找到了正确的 viewBox,你可以很容易地使它适合任何大小的矩形。只需将内部的 、 和x
设置y
为矩形的大小。width
height
<svg>
在这里演示:http: //jsfiddle.net/ZRgEF/3/