Question

我需要获得所需高度和宽度的文本。我试图在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>

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

Answer 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的{{1}}，y，width和height设置为矩形的大小。

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

如何获得所需高度和宽度的文本？

1 个答案: