代码之家 › 专栏 › 技术社区 › alexmeia

如何检查嵌入的SVG文档是否加载在HTML页面中?

svg dom jquery javascript

alexmeia · 技术社区 · 17 年前

我需要编辑(使用javascript)嵌入在HTML页面中的SVG文档。

加载SVG后,我可以访问SVG及其元素的DOM。但是我不知道SVG DOM是否已经准备好了,所以我不能在加载HTML页面时对SVG执行默认操作。

要访问SVG DOM,我使用以下代码:

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

其中“chart”是嵌入元素的ID。

如果我在HTML文档准备就绪时尝试访问SVG,则使用以下方法:

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

SVG始终为空。我只需要知道它何时不是空的,这样我就可以开始操纵它了。你知道有没有办法吗?

7 回复 | 直到 17 年前

-4

Mocky 17 年前

你可以试着每隔一次投票。

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

Erik Dahlström 16 年前

在主文档中的嵌入元素(例如“embed”、“object”、“iframe”)上添加 onload 调用函数的属性,或在脚本中添加事件侦听器,例如 embeddingElm.addEventListener('load', callbackFunction, false) . 另一个选择可能是倾听 DOMContentLoaded ,取决于你想要它做什么。

还可以在主文档上添加加载侦听器。 jQuery(document).ready 并不意味着所有资源都已加载,只是文档本身有一个准备好执行操作的DOM。但是请注意,如果您监听整个文档的加载,则在加载该文档中的所有资源、css、javascript等之前,不会调用回调函数。

如果使用内联SVG,则 jquery(文档)。就绪 不过会很好的。

进一步说明,您可能需要考虑使用 embeddingElm.contentDocument (如果有)而不是 embeddingElm.getSVGDocument() .

Roshan Poudyal 10 年前

你可以用一个重载支票的事件。

假设some.svg嵌入到对象标记中:

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

滑动分页

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");
}

Drew Noakes 12 年前

假设你的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所做的任何修改都将在第一次绘制之前发生,从而减少了闪烁和CPU花费在绘制上的精力。

Terence Bandoian 12 年前

嵌入元素(例如,对象)的加载事件将是我的首选,但是,如果由于某种原因这不是一个可行的解决方案,那么我为SVG DOM ready找到的唯一通用和可靠的测试是SVG根元素的getcurrentTime方法:

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 recommendation 声明svgsvgelement上的getcurrentTime:

返回相对于当前SVG文档片段的开始时间的当前时间(秒)。如果在文档时间线开始之前调用了getcurrentTime(例如,在调度文档的svGload事件之前,通过脚本在一个脚本中运行),则返回0。

Boermans 15 年前

使用jquery,可以绑定到erik提到的窗口加载事件:

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

-1

Mocky 17 年前

您可以为SVG文档中的元素分配一个onload事件处理程序,并让它在HTML页面中调用一个javascript函数。将地图上载到svgload。

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

事件在用户代理已完全解析元素及其子代并准备对该元素进行适当操作时触发。