Делая обновления Ajax в SVG, перерывы getBBox, есть ли обходной путь? - PullRequest
8 голосов
/ 17 июня 2011

У меня есть страница 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 но в моем случае объекты определенно отображаются, я их вижу.

Любое понимание или обходные пути приветствуются. К сожалению, я не могу легко указать на пример, так как это зависит от взаимодействия с сервером.

Ответы [ 2 ]

8 голосов
/ 21 января 2013

См. 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);
0 голосов
/ 15 июня 2017

Сообщение об ошибке NS_ERROR_FAILURE или

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

также появляется, если вы пытаетесь вычислить ограничивающую рамку для SVGElement, который прикреплен непосредственно к HTML DOM и не имеет родителя SVGSVGElement.Примеры (вы можете запустить код в Scratchpad, Shift+F4 в Firefox):

text, напрямую подключенный к body

Сбой, потому что <html><body><g></g></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]
*/
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...