.load(） 事件在 SVG 完成加载后未被调用/无法访问其内容

.load() event not being called after SVG is done loading / Cannot access it's contents

本文关键字：调用 访问 事件 SVG 加载 load      更新时间：2023-09-26

我有一个函数，可以根据我从 SVG 文件计算的一些值修改 SVG 的内容。也就是说，它计算文件中每个路径的长度。因此，在运行脚本以计算此值之前，必须完全加载 SVG 文件。

我在 $("#logoSVG").load(function() 里面有脚本，但由于某种原因，它永远不会运行。我也尝试过$(window).load(function()，它会运行，但在加载 SVG 之前（因为此时文档中的路径数量仍返回 0）。以下是完整的脚本：

<script>
    $("#logoSVG").load(function(){
    var path = document.getElementsByTagName('path');
    var length;
    var anim = document.getElementsByTagName('animate');
    for(i = 0; i < path.length; i++){
        length = path[i].getTotalLength().toString();
        path[i].setAttribute('stroke-dasharray',length+','+length);
        anim[i].setAttribute('values','-'+length+';0');
    }
    });
</script>

我知道该脚本有效，因为我已经在另一个内联编写 SVG 的文档中对其进行了测试。在这种情况下，我将其加载到<object>中：

<object id="logoSVG" data="imgs/logo.svg" type="image/svg+xml" style="display:block;">
      <img src="imgs/fallback.png" width="100%" style="display:block;"/>
</object>

如何让脚本在加载 SVG 之前不运行？

注意：我可能完全错了，它实际上是在加载后调用的。但是，如果是这种情况，由于某种原因，没有检测到任何<path>元素。为什么会这样？将这些元素插入页面后，我还需要执行其他操作才能访问它们吗？

没有意识到有某种方法可以处理加载到<object>中的 svg 文件。看这里。

您没有为getElementsByTagName()使用正确的document对象，因此您将无法获得预期的匹配项。它在内联情况下工作正常，因为那时只有一个文档。使用 时，可以使用引用的内容创建单独的文档。如果要从顶级文档中的脚本访问引用的文档，只需确保获取正确的document对象即可。

通过在嵌入元素（例如对象或 iframe）上使用 contentDocument 属性，您可以为内容获取正确的文档对象。

相关文章：