Динамически раскрашивайте полигоны SVG с помощью JavaScript ⇐ CSS

[Anonymous]

Я анализирую некоторые данные, которые содержат список точек, определяющих многоугольник, и целое число, указывающее, к какому классу принадлежит многоугольник. Я хотел бы сделать каждый класс разным цветом, но я заранее не знаю, сколько их будет, поэтому я хотел бы сделать это динамически в JavaScript.
Вот некоторые код, который создает некоторые из этих полигонов. В JavaScript я применяю к якорям второй класс и получаю желаемый результат. Однако, поскольку я хочу сделать это динамически, мне бы хотелось сделать это без предопределенного стиля в CSS, отличного от базового стиля. Существует также закомментированная строка, которая, как я думал, позволит добиться этого, но поведение неверно. Я пробовал много других вещей, которые становились все более и более сложными, но кажется, что это должно быть легко сделать. По сути, я хочу наследовать поведение базового класса и изменить одно свойство (заполните мой случай). Какой простой способ сделать это в JavaScript?

Код: Выделить всё

function init() {
var anchors = document.getElementById("mySvg").querySelectorAll("a");

for (var i = 0; i < anchors.length; i++) {
anchors[i].classList.add('test') // This works
//anchors[i].style.fill = "#00ff0077"         // This does not
}
}

init()

Код: Выделить всё

svg {
display: block;
width: 100%;
height: auto;
margin: 0 auto;
}

a {
stroke: #070000;
stroke-width: 1.0;
fill: #77777777;
transition: fill .15s;
}

/* Clear mask on mouseover to make the segment more visible */
.segment:hover {
fill: #00000000;
stroke-width: 0.0;
}

/* Use bright color to show focus */
.segment:focus {
fill: orange;
}

/* New color for testing */
.test {
fill: #00007777;
}

Код: Выделить всё

[img]http://placehold.it/200x200[/img]

[url=#]  [/url]
[url=#]  [/url]
[url=#]  [/url]
[url=#]  [/url]

Подробнее здесь: https://stackoverflow.com/questions/787 ... javascript