Манипуляции SVG с помощью JS без фреймворков?

Question

[ilya404]

Приветствую!

Нужно реализовать подобие Paint на svg в вебе. По клику, беру его координаты в окне и добавляю в svg дочерний элемент:



Проблема: он не отрисовывается, хотя появляется в DOM, как полагается. DevTools показывает пустые стили. Что делать, друзья?

Comments

[Lynn «Кофеман»]

Как добавляете?

146% забыли namespace

[ilya404]

window.onclick = function(e) {
    var dot = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
    canvass.appendChild(dot);
    var dot = canvass.lastChild;
    dot.setAttributeNS('http://www.w3.org/2000/svg', 'cx', e.pageX);
    dot.setAttributeNS('http://www.w3.org/2000/svg', 'cy', e.pageY);
    dot.setAttributeNS('http://www.w3.org/2000/svg', 'r', '15');
    dot.setAttributeNS('http://www.w3.org/2000/svg', 'fill', "#ED6E46");
}

[Lynn «Кофеман»]

ilya404: М-да. Перестарались.

Атрибутам не нужен namespace.

dot.setAttribute('cx', e.pageX);
...

[ilya404]

Алексей Тен: Спасибо, товарищ, работает!

Answer 1

[svetlov97]

Можно увидеть код который ты используешь, пожалуйста.
Советую тебе прочитать замечательную статью на MDN про SVG вот ссылка.