试图在SVG 1.1中创建可重复使用的文本框（背景颜色为方形的文本）？

Question

我正在尝试创建（我想会是这样！）一个简单的可重复使用的SVG，以显示三行文本以及背景颜色-模拟“便利贴”。

我在这里找到了一些有用的代码来获取我正在使用的文本边界http://my.opera.com/MacDev_ed/blog/2009/01/21/getting-boundingbox-of-svg-elements 。

因此：我正在SVG的'defs'部分中创建一组文本元素，如下所示：

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

我正在显示带有'use'元素的文本，如下所示：

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

我正在使用onclick触发对以下javascript函数（在“ defs”部分中定义）的调用：

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

（“ getBBoxAsRectElement（elem）”来自我发布的链接）。

就目前而言； 这很好用-但是，如果我更改'use'元素以将文本放置在这样的其他位置：

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

现在，文本显示在正确的位置，但是所得的“背景色”（实际上是不透明度为0.5的“矩形”元素）仍显示在svg画布的左上方-以及用于计算矩形的函数我需要的是返回“ -2”而不是“ 100”（“-98”？）。

我需要怎么做才能将“ rect”元素和text元素对齐？

（非常有用的文章btw）脚本的作者提供了一个更高级的脚本，可以在SVG中的任何“ bb”周围画一个框，但是我无法使它起作用（缺少“ transform”功能？）。

我正在使用Firefox 7.x渲染SVG； 我正在从磁盘直接加载一个.svg文件（即，未嵌入html等文件中）进行测试。

Answer 1

是的，您可能需要暂时补偿<use>元素上的x和y属性，我将尝试寻找一些时间来更新博客文章和脚本。

这是SVG 1.1草案测试 ，除其他外，它检查bbox中是否包含x和y属性的影响。 以[myUse]开头的行是测试这种情况的行，如果它为红色，则表示该子测试失败。 Chromium和Opera Next都通过了该子测试，而Firefox每晚和IE9都没有通过。 请注意，测试本身尚未经过全面审查，并且可能仍会更改。