我试图让 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 选择器？
注意：我不想使用路径上的文本方法。只是具有固定大小的字体。
Thanks;
字体的大小决定了它的大小height，不是它的宽度；而且字符很少是方形的。
据我所知，没有办法通过 CSS 可靠地确定等宽文本的宽度。
嗯，CSS3 有ch unit http://www.w3.org/TR/css3-values/#ch-unit，这是宽度0特点。这适用于等宽文本。但 SVG 不支持它。
当然，您可以设置固定的像素宽度。 300 像素的宽度适合我。但是，如果其他人使用不同的等宽字体，则固定宽度可能会被关闭。如果您添加font-family:monospace;font-size:100px; on the <rect>您也可以设置矩形的宽度ems。但我不认为这更可靠。
但是，您可以使用脚本。您可以使用getComputedTextLength() http://www.w3.org/TR/SVG/text.html#__svg__SVGTextContentElement__getComputedTextLength获取 a 的文本长度文本元素 http://www.w3.org/TR/SVG11/text.html#TextElement:
<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()同样，获取文本元素的边界框，以便您可以设置矩形的高度以匹配字体大小，以防您决定更改字体大小。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
