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对象，它们是文档的实时视图，这意味着不能保证它们随时都有相同的内容，因此我们派生一个Array来针对它编写稳定的代码。

请注意，如果SVG对象位于iframe中，则几乎可以保证不会“仅具有访问权限”，在这种情况下，您需要确保SVG文档加载了自己的脚本，该脚本可以进行对话通过window.postMessage()渠道（或Websocket，但这太过分了）访问父页面。

循环浏览Javascript中的SVG文件

1 个答案: