ajax - 在 SVG 中执行 Ajax 更新会破坏 getBBox，是否有解决方法？

Question

我有一个带有一些复杂图表的 SVG 页面；我正在尝试添加通过 Ajax 调用按需插入更多复杂性的代码。这主要是有效的，但插入的节点行为不正常。特别是 getBBox() 在某些元素上失败，在 Firefox 中，错误是这样的:

uncaught exception: [Exception... "Component returned failure code: 0x80004005  (NS_ERROR_FAILURE) [nsIDOMSVGLocatable.getBBox]"  nsresult: "0x80004005 (NS_ERROR_FAILURE)"  location: "JS frame :: http://localhost:1555/svg-scripts.js :: addBackground :: line 91"  data: no]

问题似乎与这个有关:
https://bugzilla.mozilla.org/show_bug.cgi?format=multiple&id=612118
但在我的情况下，对象肯定是渲染的，我可以看到它们。

任何见解或解决方法表示赞赏。不幸的是，我不能轻易指出一个例子，因为这依赖于服务器交互。

Answer 1

见 https://bugzilla.mozilla.org/show_bug.cgi?id=612118 (SVGLocatable.getBBox() 失败，除非它应用到的 SVG 元素被附加并呈现)。

你必须把你的元素放到 SVG 并且 style.display 必须是非 “无” .

另见 SVG 'getBBox' fails in a jQueryUI tab

我通过将文本放置在不可见区域( [-1000; -1000] )来解决问题:

function SVGlibText(x, y, text) {
    this.value = document.createElementNS(SVGlibBase.svgNS, "text");
    this.value.setAttribute("x", x);
    this.value.setAttribute("y", y);
    this.value.textContent = text;
}
SVGlibText.prototype.moveTo = function(x, y) {
    this.value.setAttribute("x", x);
    this.value.setAttribute("y", y);
    return this;
}
SVGlibText.prototype.getW = function() {
    return this.value.getBBox().width;
}
SVGlibText.prototype.getH = function() {
    return this.value.getBBox().height;
}

var text = new SVGlibText(-1000, -1000, "Hello world!");

获取宽度/高度:

var textW = text.getW();
var textH = text.getH();

并在计算宽度/高度后将文本放置到必要的位置(需要宽度/高度以确定文本的位置):

text.moveTo(off, off + textH);