这样做的Ajax更新的SVG分行符getBBox，有没有解决办法？

问题描述：

我有一些复杂的图形的SVG网页;我试图增加code，它通过对需求的Ajax调用插入更加复杂。这主要工作，但插入的节点不正确地运行。特别getBBox（）失败的一些元素，在Firefox中的错误是这样的：

I have an SVG page with some complex diagrams; I'm trying to add code that inserts even more complexity via an Ajax call on demand. This is mostly working, but the inserted nodes don't behave properly. In particular getBBox() fails on some elements, in Firefox the error is something like this:

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 但在我的情况下，物体肯定渲染，我可以看到他们。

The problem seems to be related to this one: https://bugzilla.mozilla.org/show_bug.cgi?format=multiple&id=612118 but in my case the objects are definitely rendered, I can see them.

任何有识之士或者AP的解决方法preciated。不幸的是我不能轻易地指向一个例子，因为这依赖于服务器的交互。

Any insight or workarounds appreciated. Unfortunately I can't easily point to an example since this relies on a server interaction.

答

请参阅的https：/ /bugzilla.mozilla.org/show_bug.cgi?id=612118 （ SVGLocatable.getBBox（）将失败，除非它是适用于附加和呈现的SVG元素的）。

您必须把你的元素，SVG和的style.display必须是非无

You must put your element to SVG and style.display must be non-"none".

参见 SVG'getBBox失败的jQueryUI的标签

我通过把文本的不可见区域临时解决问题（ [ - 1000; -1000] ）：

I workaround issue by placing text at invisible area ([-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!");

越来越宽/高：

getting width/height:

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

和宽度/高度计算后放置文本必要的位置（这需要宽度/高度，以确定文本的位置）：

and placing text to necessary position after calculation with width/height (which require width/height in order to determine position of text):

text.moveTo(off, off + textH);

这样做的Ajax更新的SVG分行符getBBox，有没有解决办法？

相关推荐