Javascript 如何检查html页面中是否加载了嵌入式SVG文档？_Javascript_Jquery_Dom_Svg

Javascript 如何检查html页面中是否加载了嵌入式SVG文档？

javascript jquery dom svg

Javascript 如何检查html页面中是否加载了嵌入式SVG文档？,javascript,jquery,dom,svg,Javascript,Jquery,Dom,Svg,我需要编辑（使用javascript）嵌入在html页面中的SVG文档加载SVG后，我可以访问SVG的dom及其元素。但是我不知道SVG dom是否准备好了，所以我无法在加载html页面时对SVG执行默认操作要访问SVG dom，我使用以下代码： var svg = document.getElementById("chart").getSVGDocument(); 其中“图表”是嵌入元素的id 如果我尝试在html文档准备就绪时访问SVG，请使用以下方式： jQuery(document

我需要编辑（使用javascript）嵌入在html页面中的SVG文档

加载SVG后，我可以访问SVG的dom及其元素。但是我不知道SVG dom是否准备好了，所以我无法在加载html页面时对SVG执行默认操作

要访问SVG dom，我使用以下代码：

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

其中“图表”是嵌入元素的id

如果我尝试在html文档准备就绪时访问SVG，请使用以下方式：

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

svg总是空的。我只需要知道它什么时候不是空的，这样我就可以开始操作它了。

您知道是否有办法做到这一点吗？

您可以为SVG文档中的元素分配一个onload事件处理程序，并让它在html页面中调用javascript函数。onload映射到SVGLoad

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

你可以尝试每隔一段时间进行一次投票

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

在主文档中的嵌入元素（例如“嵌入”、“对象”、“iframe”）上添加调用函数的

onload

属性，或在脚本中添加事件侦听器，例如

embeddedingelm.addEventListener（'load'，callbackFunction，false）

。另一个选项可能是监听

DOMContentLoaded

，这取决于您想要它做什么

还可以在主文档上添加加载侦听器

jQuery（document）.ready

并不意味着所有资源都已加载，只意味着文档本身有一个可供操作的DOM。但是请注意，如果您侦听整个文档的加载，则在加载该文档中的所有资源（css、javascript等）之前不会调用回调函数

如果您使用内联svg，那么

jQuery（document）.ready

将很好地工作

另一方面，您可能需要考虑使用<代码>嵌入式Pixelm。Cordon文档< /C> >（如果可用），而不是<代码> EngultEng.GETSvGoDebug（）/< > > /P> < P>使用jQuery，您可以绑定到埃里克加载的窗口加载事件：

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

假设SVG位于

标记中：

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

这比轮询更好，因为您对SVG所做的任何修改都会在SVG首次绘制之前发生，从而减少闪烁和绘制所花费的CPU精力。

我更喜欢嵌入元素（例如对象）的加载事件，但是，如果出于某种原因这不是一个可行的解决方案，对于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 */
}

SVGSVGElement上的getCurrentTime状态为：

返回相对于当前SVG文档片段开始时间的当前时间（秒）。如果在文档时间线开始之前调用getCurrentTime（例如，通过在调度文档的SVGLoad事件之前在“script”元素中运行的脚本），则返回0

您可以使用onload事件进行检查

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

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

javascript

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

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

供将来参考：（8）/解决方案如下：

  @ViewChild('startimage', {static:false})
  private startimage: ElementRef;
...
  this.startimage.nativeElement.addEventListener('load', () => {
    alert('loaded');
  });

您可以通过

const svg=this.startimage.nativeElement.getSVGDocument（）访问svg
不，我无法编辑SVG文档。当它在网页中时，我可以对它进行操作。加载父对象不起作用，只有实际的svg。是的，它起作用。没有考虑超时解决方案。。。谢谢，伙计。投票不是一个好方法。改为使用“加载”事件监听器。@ErikDahlströmload
事件监听器有问题。我认为通过这种方式，您可以知道何时在html页面中加载SVG对象，但您仍然不知道SVG的DOM是否已准备就绪。我在将jquery嵌入独立SVG时发现这一点很有效-谢谢！如果脚本运行时已加载embeddingElm，则addEventListener（'load'，callbackFunction，false）将不起作用。如果在SVG中链接图像（如背景图像），则DOMContentLoaded将不起作用。您（不应该）想执行：类似于：window.onload的操作，因为这样您就必须等待所有外部资源也被下载（例如跟踪脚本和广告）您还知道如何在角度测试中在SVG对象上触发此加载事件侦听器吗？在Safari上，如果SVG内容已经加载，load
将永远不会触发。如果将SVG文档指定给导致加载该文档的DIV之类的内容，则onload是否有效？这一点“当我们知道DOM和内容真的被加载，以便可以调用SVG或查询中定义的定义的ECMAScript函数时，DOM在2018中似乎仍然是一个命中/失败命题。根据我从一些人那里听到的。注意：考虑使用<代码> AdvestTistListar（‘Load’，Hyror））。

而不是设置

onload

属性，以确保不覆盖其他加载处理程序。不过，古代的浏览器并不支持这一点。问题：jQuery的

load

是我尝试使用的第一个方法，但是如果没有

'image/svg+xml'

作为第一个参数，它将无法工作。你能解释一下这个魔法吗？我在jQuery文档中找不到解释。它只是将参数提到

url

（这里我们给出一个MIME类型）。再说一遍，为什么我们不需要这样一个东西来实现

onload

？我认为可以肯定地说，如果您假设浏览器能够显示嵌入式svg，那么您可以确定它也实现了

addEventListener

。

svgholder.load（“image/svg+xml”，function（）…

似乎正在调用jquery ajax加载。在v3.0之前，jquery根据提供的参数确定要调用的加载。在第一个参数中有一个字符串，jquery尝试将“image/svg+xml”作为url进行GET。因为它将加载

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

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

  @ViewChild('startimage', {static:false})
  private startimage: ElementRef;
...
  this.startimage.nativeElement.addEventListener('load', () => {
    alert('loaded');
  });