Question

我正在尝试创建（我认为会是这样！）一个简单的可重复使用的SVG位来显示三行文本，带有背景颜色 - 模拟'post-it'注释。

我在这里找到了一些有用的代码来获取我正在使用的文本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);"/>

现在，文本显示在正确的位置，但是生成的'background-color'（实际上是一个不透明度为0.5的'rect'元素）仍显示在svg canvass的左上角 - 以及用于的函数如我所知（我认为），计算矩形是否返回'-2'而不是'100'（' - 98'？）。

我需要做什么来排列'rect'元素和文本元素？

（非常有用的文章btw）脚本的作者提供了一个更高级的脚本来在SVG中的任何'bb'周围绘制一个框，但是我无法使其工作（缺少'transform'函数？）。

我正在使用Firefox 7.x来渲染SVG;我正在直接从磁盘加载一个.svg文件（即，没有嵌入在html等中）以测试它。）

Answer 1

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

这是一个draft SVG 1.1 test，其中包括检查x和y属性的效果是否包含在bbox中。开始 [myUse] 的行是测试这种情况的行，如果它是红色则该子测试失败。 Chromium和Opera接下来都通过了那个子测试，而Firefox则每晚都通过，而IE9则没有。请注意，测试本身尚未经过全面审核，并且可能仍会发生变化。

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

1 个答案: