Question

我有一个函数可以根据我从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>个元素。为什么会这样？在将这些元素插入页面后，我还需要做些什么才能访问这些元素吗？

Answer 1

没有意识到有一种方法来处理加载到<object>的svg文件。请参阅here。

Answer 2

您没有为document使用正确的getElementsByTagName()对象，因此您无法获得所期望的匹配。它在内联案例中工作正常，因为那时只有一个文档。当您使用＆lt; object＆gt;时您使用引用的内容创建单独的文档。如果要从顶级文档中的脚本访问引用的文档，请确保获取正确的document对象。

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

Answer 3

您可以检查document.getElementsByTagName（＆＃39; path＆＃39;）是否返回带有

的非空数组

window.setInterval（）

像这样的方法：

window.load = function(){
   var pathCheck = window.setInterval(function(){
     if(document.getElementsByTagName('path').length > 0) {
       window.clearInterval(pathCheck);
       DoStuff();
     }
   }, 100);
}

function DoStuff(){
  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');
  }
}

SVG完成加载后无法调用.load（）事件/无法访问它的内容

3 个答案: