Trying to create a re-usable text-box (text with a square background-colour) in SVG 1.1?

Question

I'm trying to create (what I thought would be!) a simple re-usable bit of SVG to show three lines of text, with a background colour - to simulate a 'post-it' note.

I have found some useful code here to get the Bounds of the Text http://my.opera.com/MacDev_ed/blog/2009/01/21/getting-boundingbox-of-svg-elements which I am using.

So: I'm creating an group of text elements like this in the 'defs' section of my SVG:

<svg id="canvas" width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g id="post_it">
    <text x="0" y="30" id="heading" class="heading">My Heading</text>
    <text x="0" y="45" id="description" class="description">This will contain the description</text>
    <text x="0" y="60" id="company" class="company">Very Big Company Ltd.</text>
    </g>

And I'm displaying the text with a 'use' element like this:

<use id="12345" class="postit" xlink:href="#post_it" onclick="showId(this);"/>

I'm using the onclick to trigger a call to the following javascript function (defined in 'defs' section):

function showId(elem) {
        post_it_rect=getBBoxAsRectElement(elem);
        document.getElementById('canvas').appendChild(post_it_rect);
}

(The 'getBBoxAsRectElement(elem)' is from the link I posted).

As this stands; this works just fine - however if I change my 'use' element to position the text in a different place like this:

<use x="100" y="100" id="12345" class="postit" xlink:href="#post_it" onclick="showId(this);"/>

Now, the text displays in the correct place, but the resultant 'background-color' (actually a 'rect' element with opacity of 0.5) still shows on the top-left of the svg canvass - and the function used to calculate the rect is returning '-2' rather than '100' ('-98'?) as I need (I think).

What do I need to do to line up the 'rect' elements and the text elements ?

The author of the (very helpful article btw) script provides a more advanced script to draw a box round any 'bb' in an SVG, but I couldn't get this to work (missing 'transform' functions?).

I'm using Firefox 7.x to render the SVG ; and I'm loading a .svg file (ie, not embedded in html etc) straight from disk to test this).

Answer 1

Yes, you may need to compensate yourself for the x and y attributes on the <use> element for the time being, I'll try to find some time to update the blogpost and script.

Here's a draft SVG 1.1 test that among other things checks that the effect of the x and y attributes are included in the bbox. The line starting [myUse] is the one that tests this case, if it's red then that subtest failed. Chromium and Opera Next both pass that subtest, while Firefox nightly and IE9 doesn't. Note that the test itself has not gone through full review yet, and that it may still change.