Svg, Text, Font with Fixed Width/Height

SVG, text , font with fixed width/height

The size of a font determines its height, not its width; and characters are rarely square.

So as far as I know, there's no way to determine the width of even monospace text reliably through CSS.

Well, CSS3 has the ch unit, which is the width of the 0 character. That would work for monospace text. But it's not supported in SVG.

You could just set a fixed width in pixels, of course. A width of 300 pixels works for me. But then if someone else uses a different monospaced font that fixed width could be off. If you add the font-family:monospace;font-size:100px; on the <rect> too, you can set the width of the rectangle in ems. But I don't think that's any more reliable.

You can, however, use scripting. You can use getComputedTextLength() to get the text length of a text element:

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

Adding that at the end of your SVG (and adding the appropriate element IDs) works in Opera 10, Firefox 3.5 and Safari 4.0, at least.

And while you're at it, you could use getBBox() too, to get the text element's bounding box so you can set the height of the rectangle to match the font size too, in case you ever decide to change the font size.

SVG: fixed font size

The short answer is no.

If the text is in an SVG with a viewBox, and the SVG gets scaled, its contents get scaled also. There is no way to make the text have a "global" size that is unaffected by the SVG scaling.

The only possible solution would be calculate the scaling factor using Javascript and dynamically update the font size every time the SVG size changed.

Is it possible to set a svg's text/tspan to a fixed width?

I think your attempt is close, you're just using the wrong value for text-anchor. If you use text-anchor="end" it will align the text to the right of the element.

So, we can set the x position of the tspan to 100%, and along with text-anchor="end" the text will be positioned to the right regardless of length.

<svg width="100%" height="110">  <text>  <tspan x="100%" y="15" text-anchor="end"     baseline-shift="0%" kerning="0"      font-family="Arial" font-weight="bold"     font-size="12" fill="#490275" xml:space="preserve">       This is entered by user.</tspan></text>  Sorry, your browser does not support inline SVG.  </svg>

---

Related Topics