在 Javascript 中循环遍历 SVG 文件

Question

我试图通过一个相当基本的 SVG 文档，其中有四个<rects>，每个都有一个唯一的 ID。我想将这些元素添加到数组中。

这就是我所拥有的...

    // event listner to make sure the page has loaded before running the scrupt
window.addEventListener("load", function(){
    // gets an SVG object from the inline HTML
    var svgObject = document.getElementById('rectTestSvg').contentDocument;

    var elementList = [];

    for(var i = 0; i < svgObject.numElements; i++){
        if(svgObject[i].id('*_rect') === true)
           {
           elementList.push(svgObject.getElementAt(i));
           }
    }

    console.log(elementList);
    });

它在获取 svgObject 后不起作用，但希望它至少有助于说明这个想法。

任何人都可以抛出我的方式的任何帮助将不胜感激

Answer 1

在 HTML5 中，SVG 元素及其内容“只是 DOM 元素”，因此直接查询选择元素，然后直接从结果中形成一个数组：

var myRects = Array.from(svgObject.querySelectorAll("rect"));

完毕。

你想要的原因Array.from是因为查询选择是NodeList对象 - 虽然它们是静态的（在这种特殊情况下，但绝对不是总是如此阅读你使用的函数的函数文档！）它们没有任何数组函数使用列表实际上很容易（map，filter等），因此我们将其转换为用于编写普通代码的数组。

请注意，如果您的 SVG 对象位于 iframe 内，则几乎可以保证您不会“只是可以访问”它，在这种情况下，您需要确保 SVG 文档加载自己的脚本，可以与父级对话通过window.postMessage()通道（或 websocket，但这是矫枉过正）页面。