尝试在 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”？），因为我需要（我认为）。

我需要做什么来对齐“矩形”元素和文本元素？

（顺便说一句，非常有用的文章）脚本的作者提供了一个更高级的脚本，可以在 SVG 中的任何“bb”周围绘制一个框，但我无法让它工作（缺少“变换”功能？）。

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

Answer 1

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

这是SVG 1.1 测试草案 除其他事项外，还检查 x 和 y 属性的效果是否包含在 bbox 中。以 [myUse] 开头的行是测试此案例的行，如果它是红色的，则该子测试失败。 Chromium 和 Opera Next 都通过了该子测试，而 Firefox nightly 和 IE9 则未通过。请注意，测试本身尚未经过全面审查，并且可能仍会发生变化。