在 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个元素”，所以直接queryselect元素，然后直接根据结果组成一个数组：

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

完成。

你想要 Array.from 的原因是因为查询选择是 NodeList 对象 - 虽然它们是静态的（在这种特殊情况下，但绝对不总是如此阅读函数的函数文档你用！）它们没有任何数组函数可以让使用列表变得容易（map，filter，等等）所以我们把它变成一个数组来编写普通代码。

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

在 Javascript 中循环遍历 SVG 文件

Loop through an SVG file in Javascript

javascript

svg

elements