在 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 必须为非“none”。

另请参阅 SVG 'getBBox' 在 jQueryUI 选项卡中失败

我的解决方法问题通过将文本放置在不可见区域（[-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);

Answer 2

，也会出现 NS_ERROR_FAILURE 错误消息

Exception { message: "", result: 2147500037, name: "NS_ERROR_FAILURE", ...}`)

如果您尝试计算直接附加到 HTML DOM 并且没有父级 的 SVGElement 的边界框 SVGSVGElement。示例（您可以在 Scratchpad 中运行代码，在 Firefox 中运行 Shift+F4）：

text 直接附加到 body

这会失败，因为 < ;html> 不允许。

var text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
document.body.appendChild(text)
text.getBBox()
/*
Exception: [Exception... "Failure"  nsresult: "0x80004005 (NS_ERROR_FAILURE)"  location: "JS frame :: Scratchpad/2 :: <TOP_LEVEL> :: line 3"  data: no]
*/

text 附加到 svg

这有效。

var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
var text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
svg.appendChild(text);
document.body.appendChild(svg)
text.getBBox()
/*
[object SVGRect]
*/