Как проверить, загружен ли встроенный документ SVG на страницу html?

Мне нужно отредактировать (используя javascript) документ SVG, встроенный в html-страницу.

Когда SVG загружен, я могу получить доступ к dom SVG и его элементам. Но я не могу знать, готов ли SVG dom или нет, поэтому я не могу выполнять действия по умолчанию на SVG при загрузке страницы html.

Чтобы получить доступ к SVG dom, я использую этот код:

var svg = document.getElementById("chart").getSVGDocument();

где "chart" - это идентификатор элемента embed.

Если я попытаюсь получить доступ к SVG, когда документ html готов, следующим образом:

jQuery(document).ready( function() {
var svg = document.getElementById("chart").getSVGDocument();
...

svg всегда равно нулю. Мне просто нужно знать, когда это не пусто, поэтому я могу начать манипулировать им. Вы знаете, есть ли способ сделать это?

Ответы

Ответ 1

Вы можете часто опробовать опрос.

function checkReady() {
    var svg = document.getElementById("chart").getSVGDocument();
    if (svg == null) {
        setTimeout("checkReady()", 300);
    } else {
        ...
    }
}

Ответ 2

В вашем элементе внедрения (например, "embed", "object", "iframe" ) в основном документе добавьте атрибут onload, который вызывает вашу функцию, или добавьте прослушиватель событий в script, например embeddingElm.addEventListener('load', callbackFunction, false), Другим вариантом может быть прослушивание DOMContentLoaded, зависит от того, для чего вы хотите.

Вы также можете добавить слушателя загрузки в основной документ. jQuery(document).ready не означает, что загружаются все ресурсы, только сам документ имеет DOM, который готов к действию. Однако обратите внимание, что если вы прослушиваете загрузку всего документа, функция обратного вызова не будет вызываться до тех пор, пока не будут загружены все ресурсы в этом документе, css, javascript и т.д.

Если вы используете inline svg, тогда jQuery(document).ready будет работать только отлично.

В следующем примечании вы можете рассмотреть возможность использования embeddingElm.contentDocument (если доступно) вместо embeddingElm.getSVGDocument().

Ответ 3

  Для проверки вы можете использовать событие onload.

Предположим, что some.svg встроен в тег объекта:

<body>    
<object id="svgholder" data="some.svg" type="image/svg+xml"></object>
</body>

Jquery

var svgholder = $('body').find("object#svgholder");

svgholder.load("image/svg+xml", function() {
    alert("some svg loaded");
});

Javascript

var svgholder = document.getElementById("svgholder");

svgholder.onload = function() {
    alert("some svg loaded");
}

Ответ 4

Предполагая, что ваш SVG находится в теге <embed>:

<embed id="embedded-image" src="image.svg" type="image/svg+xml" />

Изображение SVG, по существу, находится в поддоку, который будет иметь отдельный load событие с основным document. Однако вы можете прослушать это событие и обработать его:

var embed = document.getElementById("embedded-image");
embed.addEventListener('load', function()
{
    var svg = embed.getSVGDocument();
    // Operate upon the SVG DOM here
});

Это лучше, чем опрос, поскольку любая модификация, которую вы делаете в SVG, произойдет до того, как она будет сначала нарисована, что уменьшит мерцание и затраты на процессор, потраченные на рисование.

Ответ 5

Событие загрузки элемента внедрения (например, объект) было бы моим предпочтением, но если это почему-то не является жизнеспособным решением, единственный общий и надежный тест, который я нашел для SVG DOM, - это метод getCurrentTime корневого элемента SVG:

var element = document.getElementById( 'elementId' );
var svgDoc = element.contentDocument;
var svgRoot = svgDoc ? svgDoc.rootElement : null;

if ( svgRoot
    && svgRoot.getCurrentTime
    && ( svgRoot.getCurrentTime() > 0 ))
{
    /* SVG DOM ready */
}

рекомендация W3C SVG утверждает, что getCurrentTime на SVGSVGElement:

Возвращает текущее время в секундах относительно времени начала текущего фрагмента документа SVG. Если getCurrentTime вызывается до начала временной шкалы документа (например, с помощью script, запущенного в элементе script перед отправкой события SVGLoad), возвращается 0.

Ответ 6

С помощью jQuery вы можете привязываться к событию загрузки окна. Эрик упоминает:

$(window).load(function(){
    var svg = document.getElementById("chart").getSVGDocument();
});

Ответ 7

Вы можете назначить обработчик события onload для элемента в вашем документе SVG и вызвать функцию javascript на странице html. загружать карты в SVGLoad.

http://www.w3.org/TR/SVG11/interact.html#LoadEvent

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