1

我需要获得具有所需高度和宽度的文本。我试图在 svg 的文档中找到一些东西，但只找到了font-size，我也尝试以这种方式使用 scale：

<text xmlns="http://www.w3.org/2000/svg" id="10996080909940" name="-1"
x="1782.9351809218"   y="-751.796133712862" width="1" height="1" style="font:Arial;text-
anchor:start;stroke:#000000" transform="rotate(0) scale(2 2)"> SOME TEXT </text>

但是我的文本太大了，而且不在我需要的地方。

4

1 回答 1

1

如果您的意思是您希望文本完全填充任意宽度和高度，那么在 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为矩形的大小。widthheight<svg>

在这里演示：http: //jsfiddle.net/ZRgEF/3/

于 2013-10-22T06:55:03.147 回答