Question

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

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

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

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

其中“chart”是embed元素的id。

如果我在html文档准备就绪时尝试访问SVG，则以这种方式：

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

svg始终为null。我只需要知道它何时不为空，所以我可以开始操纵它。你知道有没有办法做到这一点？

Answer 1

在主文档中的嵌入元素（例如'embed'，'object'，'iframe'）上添加一个调用函数的onload属性，或者在脚本中添加事件监听器，例如{{1 }}。另一个选择可能是听embeddingElm.addEventListener('load', callbackFunction, false)，取决于你想要它。

您还可以在主文档上添加加载侦听器。 DOMContentLoaded并不意味着所有资源都被加载，只是文档本身有一个可以采取行动的DOM。但是请注意，如果你在整个文档上监听加载，那么在加载该文档中的所有资源，css，javascript等之前，不会调用回调函数。

如果您使用内联svg，那么jQuery(document).ready将正常工作。

另外请注意，您可能需要考虑使用jQuery(document).ready（如果可用）而不是embeddingElm.contentDocument。

Answer 2

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

假设some.svg嵌入在object标签中：

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

Answer 3

假设您的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工作量。

Answer 4

嵌入元素（例如对象）的加载事件将是我的偏好，但是，如果由于某种原因这不是一个可行的解决方案，我发现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 recommendation表示SVGSVGElement上的getCurrentTime：

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

Answer 5

使用jQuery，您可以绑定到Erik提到的窗口加载事件：

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

Answer 6

供以后参考：Angular（8）/ Typescript解决方案如下：

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

您可以通过const svg = this.startimage.nativeElement.getSVGDocument();进入svg

Answer 7

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

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

事件在用户代理完全解析了元素及其后代并且已准备好对该元素采取适当行动时触发

Answer 8

你可以经常尝试民意调查。

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

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

8 个答案: