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

Posted 2023-03-06

【中文标题】SVG、文本、固定宽度/高度的字体

【英文标题】：SVG, text , font with fixed width/height

【发布时间】：2010-12-16 11:31:37

【问题描述】：

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

但文字右侧有一个空白。

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

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

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

谢谢；

【参考方案1】：

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

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

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

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

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

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