Javascript: Как я могу поместить SVG-изображения в массив?

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

Если они вам нужны в массиве, сначала получите их родительский элемент. Назовем это svgParent, тогда сделайте вот так.

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

Вы должны получить три элемента svg в соответствующем массиве. Мы используем element.querySelectorAll() от родителя, потому что в случае существования других элементов svg мы не хотим собирать элементы svg, кроме этих трех.

Answer 2

<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/ Demo для вас (проверьте консоль)

Answer 3

document.querySelectorAll('svg'); или document.getElementsByTagName('svg') может быть использовано, чтобы поместить все svg элементов в массиве, как объект.

document.querySelectorAll() вернет NodeList в то время как

document.getElementsByTagName('') возвратит HTMLCollection

Answer 4

1- Создание родительского SVG элемент

2- Bind данные в 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"]; });