試圖在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都沒有通過。 請注意，測試本身尚未經過全面審查，並且可能仍會更改。