Question

我正在尝试在svg'rect'元素内部安装一个SVG'text'元素。例如在下面的例子中，我使用了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选择器？

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

感谢;

Answer 1

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

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

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

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

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

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

1 个答案: