Question

说我有三个圆圈 - 一个是红色，一个是黄色，一个是绿色。

    <svg height="100" width"100"=""> <circle cx="50" cy="50" r="40" stroke = "black" stroke-width = "3" fill="red "></circle> </svg>

    <svg height="100" width"100"=""> <circle cx="50" cy="50" r="40" stroke = "black" stroke-width = "3" fill="yellow"></circle> </svg>  

    <svg height="100" width"100"=""> <circle cx="50" cy="50" r="40" stroke = "black" stroke-width = "3" fill="green"></circle> </svg>

是否可以创建一个包含这3个的数组？如果没有，你能推荐一种方法，我可以创建一个包含三个红色，黄色和绿色圆圈的阵列吗？

非常感谢

Answer 1

<svg height="100" width="100"> <circle cx="50" cy="50" r="40" stroke = "black" stroke-width = "3" fill="red "></circle> </svg>

    <svg height="100" width="100"> <circle cx="50" cy="50" r="40" stroke = "black" stroke-width = "3" fill="yellow"></circle> </svg>  

    <svg height="100" width="100"> <circle cx="50" cy="50" r="40" stroke = "black" stroke-width = "3" fill="green"></circle> </svg>

JS代码

var svgArray = document.querySelectorAll('svg');

console.log(svgArray[0]); // svgArray[0] is red circle

https://jsfiddle.net/b9mysaew/为你演示（检查控制台）

Answer 2

document.querySelectorAll('svg');或document.getElementsByTagName('svg')可用于将所有svg元素放入像对象一样的数组中。

document.querySelectorAll()将返回NodeList而

document.getElementsByTagName('')将返回HTMLCollection

Answer 3

1-创建父SVG元素

2-将数据绑定到svg并输入（）

var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom + 20);

var circles = svg.selectAll(".month")
    .data(eachcircle);
//loop from 0 to eachcircle.length
circlesdata(eachcircle).append("circle")
    .attr("cx", function(d,i) { return d[["x"];}) 
    .attr("cy", function(d,i) { return d["y"];})
    .attr("r", function (d) { return d["r"]; })
    .style("fill", function(d) { return d["color"]; });

Answer 4

如果你需要在数组中首先获取它们的父元素。我们称之为svgParent然后这样做。

var svgArr = Array.prototype.slice.call(svgParent.querySelectorAll("svg"));

你应该在适当的数组中获得三个svg元素。我们正在使用来自父级的element.querySelectorAll()，因为如果存在其他svg元素，我们不希望收集除这三个之外的svg元素。

Javascript：如何将SVG图像放入数组中？

4 个答案: