7

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

但是在正文的右边有一个空白。

<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>

我应该为“文本”元素使用哪些 CSS 选择器？

注意：我不想使用 text-on-a-path 方法。只是一个固定大小的字体。

谢谢;

4

1 回答 1

8

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

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

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

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

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

<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()获取文本元素的边界框，以便您可以设置矩形的高度以匹配字体大小，以防您决定更改字体大小。

于 2009-11-14T01:13:39.083 回答