SVG、文本、固定宽度/高度的字体

发布于 2024-08-10 23:44:25 字数 509 浏览 2 评论 0原文

我试图让 SVG“文本”元素适合 svg“矩形”元素。例如，在下面的示例中，我使用了 5 个字符的等宽文本，字体大小为 100px，并且我希望有一个靠近文本的边界矩形。

但文本右侧有一个空白。

<svg xmlns="http://www.w3.org/2000/svg" height="200" width="1000">
    <text x="10px" y="110px" style="font-family:monospace;font-size:100px;">HELLO</text>    
    <rect x="10px" y="10px" width="500px" height="100px" style="stroke:blue;fill:none;"/> 
</svg>

我应该为“text”元素使用什么 CSS 选择器？

注意：我不想使用路径上的文本方法。只是具有固定大小的字体。

谢谢;

原文

I'm trying to get a SVG 'text' element fitting inside of a svg 'rect' element. e.g. In the example below, I used a monospace text of 5 chars with a font-size of 100px and I expected to have a bounding rectangle close to the text.

But there is a blank gap at the right of the text.

<svg xmlns="http://www.w3.org/2000/svg" height="200" width="1000">
    <text x="10px" y="110px" style="font-family:monospace;font-size:100px;">HELLO</text>    
    <rect x="10px" y="10px" width="500px" height="100px" style="stroke:blue;fill:none;"/> 
</svg>

What CSS selectors should I use for the 'text' element ?

Note: I don't want to use the text-on-a-path method. Just a font with a fixed size.

Thanks;

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

悲喜皆因你 2024-08-17 23:44:25

字体的大小决定其高度，而不是其宽度；而且字符很少是方形的。

据我所知，没有办法通过 CSS 可靠地确定等宽文本的宽度。

那么，CSS3 有 ch 单位，这是 0 字符的宽度。这适用于等宽文本。但 SVG 不支持它。

当然，您可以设置固定的像素宽度。 300 像素的宽度适合我。但是，如果其他人使用不同的等宽字体，则固定宽度可能会被关闭。如果您也在上添加font-family:monospace;font-size:100px;，则可以在中设置矩形的宽度em。但我不认为这更可靠。

但是，您可以使用脚本。您可以使用 getCompulatedTextLength() 来获取文本元素的文本长度：

<script type="text/javascript">
document.getElementById('rect').setAttribute(
    'width',
    document.getElementById('text').getComputedTextLength()
);
</script>

将其添加到末尾您的 SVG（并添加适当的元素 ID）至少可以在 Opera 10、Firefox 3.5 和 Safari 4.0 中运行。

当您使用它时，您也可以使用 getBBox() 来获取文本元素的边界框，以便您可以设置矩形的高度以匹配字体大小，以防万一决定更改字体大小。

The size of a font determines its height, not its width; and characters are rarely square.

So as far as I know, there's no way to determine the width of even monospace text reliably through CSS.

Well, CSS3 has the ch unit, which is the width of the 0 character. That would work for monospace text. But it's not supported in SVG.

You could just set a fixed width in pixels, of course. A width of 300 pixels works for me. But then if someone else uses a different monospaced font that fixed width could be off. If you add the font-family:monospace;font-size:100px; on the <rect> too, you can set the width of the rectangle in ems. But I don't think that's any more reliable.

You can, however, use scripting. You can use getComputedTextLength() to get the text length of a text element:

<script type="text/javascript">
document.getElementById('rect').setAttribute(
    'width',
    document.getElementById('text').getComputedTextLength()
);
</script>

Adding that at the end of your SVG (and adding the appropriate element IDs) works in Opera 10, Firefox 3.5 and Safari 4.0, at least.

And while you're at it, you could use getBBox() too, to get the text element's bounding box so you can set the height of the rectangle to match the font size too, in case you ever decide to change the font size.

回复收藏 0 原文

~没有更多了~