Hi all,
I’m trying to get a SVG ‘text’ element fitting inside of a svg ‘rect’ element. e.g. In the example below, I used a monospace text of 5 chars with a font-size of 100px and I expected to have a bounding rectangle close to the text.

But there is a blank gap at the right of the text.

<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>

What CSS selectors should I use for the ‘text’ element ?

Note: I don’t want to use the text-on-a-path method. Just a font with a fixed size.

Thanks;

Similar:

1. Setting a fixed height to a block breaks the 100% width The problem is when I try to set height: 20px to all rows this breaks the natural width: 100% from a block element. This bug...
2. [CSS21] Do non-positive-width floated elements shorten line boxes? At a curious intersection point of two threads [1]: Empty floated element with a set width but height:0 [2]: Trivial editorial issues with 9.5 (Floats)...
3. Setting height of text area based on text inside of it using jQuery I have a <textarea> element in my form that has this code attached to it: $('#links').focusin(function() { $('#links').animate({ height: '100px' }, 300, function() { //...
4. Auto resize image width only I have a question regarding the resizing of images. My problem is that I would like to resize files that are being uploaded automatically. But I...
5. text height and width In win32: How to get the text height and width?...

Tags: chars, gap, rect, rectangle, text element

This entry was posted on Wednesday, August 18th, 2010 at 8:38 am and is filed under dotnet, vb, vb.net. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.