Как изменить цвет кружка SVG

Question

Как изменить цвет круга svg, сгенерированного циклом for.

Я пытаюсь изменить цвет круга правой кнопкой мыши и затем сохранить его в массив.

var svgInfo = 'http://www.w3.org/2000/svg';
var customSvg = document.querySelector('svg');

var points = [
    {x: 5, y: 5},
    {x: 50, y: 50},
];

var selected = [];
for (var i = 0; i < points.length; ++i) {
    var circle = document.createElementNS(svgInfo, 'circle');
    circle.setAttribute('cx', points[i]["x"]);
    circle.setAttribute('cy', points[i]["y"]);
    circle.setAttribute('stroke', 'red');
    circle.setAttribute('stroke-width', 5);
    circle.setAttribute('r', 5);
    circle.setAttribute('fill', 'green');
    circle.setAttribute('fill-opacity', 0);
    circle.setAttribute('id', points[i]["id"]);
    circle.addEventListener('contextmenu', function (event) {
        let s = 0;
        circle.setAttribute('stroke', 'green');
        selected[s] = {id: circle.id, x: circle.cx, y: circle.cy};
        s++;
        event.preventDefault();
    });
    customSvg.appendChild(circle);
}

<svg></svg>

Answer 1

Чтобы это работало, я добавил id к каждой точке, так как у вас есть эта строка кода: circle.setAttribute('id', points[i]["id"]);

Также я заменил var circle на let circle

var svgInfo = 'http://www.w3.org/2000/svg';
var customSvg = document.querySelector('svg');

var points = [
    {x: 5, y: 5,id:"a"},
    {x: 50, y: 50,id:"b"},
];

var selected = [];
for (var i = 0; i < points.length; i++) {
    let circle = document.createElementNS(svgInfo, 'circle');
    circle.setAttribute('cx', points[i]["x"]);
    circle.setAttribute('cy', points[i]["y"]);
    circle.setAttribute('stroke', 'red');
    circle.setAttribute('stroke-width', 5);
    circle.setAttribute('r', 5);
    circle.setAttribute('fill', 'green');
    circle.setAttribute('fill-opacity', 0);
    circle.setAttribute('id', points[i]["id"]);
    circle.addEventListener('contextmenu', function (event) {console.log(circle.id)
        let s = 0;
        circle.setAttribute('stroke', 'green');
        selected[s] = {id: circle.id, x: circle.cx, y: circle.cy};
        s++;
        event.preventDefault();
    });
    customSvg.appendChild(circle);
}

svg {
  border: 1px solid;
}

<svg></svg>