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

Question

我正在尝试让 SVG“文本”元素适合 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 方法。只是一个固定大小的字体。

谢谢；

Answer 1

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

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

嗯，CSS3 有 ch unit , 这是 0 的宽度特点。这适用于等宽文本。但它在 SVG 中不受支持。

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

但是，您可以使用脚本。您可以使用 getComputedTextLength() 获取 text element 的文本长度:

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

至少在 Opera 10、Firefox 3.5 和 Safari 4.0 中将它添加到 SVG 的末尾(并添加适当的元素 ID)。

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