SVG и JS - SVG не поддается динамическому изменению атрибутов элемента.

#svg #javascript

Думаю, все знают, что есть такой сервис как Gmaps. Думаю, что некоторые пользовали
его API. Так вот, у них есть бага с SVG графикой при отрисовке геозон, которое, я понимаю,
как исправить (написал рабочую формулу расчета).  Ладно, дело не в этом. Сел я изучать
SVG графику и принципы ее отрисовки.  Вроде бы разобрался. Далее, я статически нарисовал
кружок и с помощью JS-а пытаюсь поменять его атрибуты. 
Например: 
Отрывок кода круга


Отрывок JS кода
MyClass.prototype.test = function(v){
    p = v.cx.animVal.value;
    return this.p = p+10;
};

Если трэйсить вывод функции, то результат возвращается правильный (в нашем случае
- 210). Но! Не выполняется конструкция:
onClick="this.cx.animVal.value = o.test(this);"

По итогу получаем ошибку: 

Modifications are not allowed for this document

Что свидетельствует о том, что нельзя странице с помощью JS менять атрибут этого
элемента. Вопрос: почему и как можно добиться динамического изменения атрибутов элемента
без его полной перерисовки?    

Ответы

Ответ 1

Ура, вопрос можно считать закрытым. Для начала я покопал атрибутику элемента SVG,
и нашел такой метод как setAttribute. Собственно
param.setAttribute("r", this.r) // Добавил атрибут радиуса и указал его размер, который
храниться в this.r

Далее этот атрибут можно менять сколько угодно раз без особых усилий :) Спаcибо мне :)