Неработающий код (HTML + JS)

[kotenok gav]

Не работает следующий код:
https://jsfiddle.net/os2f0z1h/ (в песочнице не отображается даже сам треугольник, поэтому надо запустить его просто так).
Почему-то обработчик не назначается.

[Geen]

Вообще говоря, на svg элементы свойства должны задаваться через setAttributeNS...

-- 12.05.2020, 21:34 --

Да и создаваться так же.

[kotenok gav]

Geen в сообщении #1462158 писал(а):

Вообще говоря, на svg элементы свойства должны задаваться через setAttributeNS...

Не совсем понимаю... Там ведь нет этих namespace.

[Geen]

(Оффтоп)

На моём сайте, если интересно, можете посмотреть "зачаток библиотеки"...

-- 12.05.2020, 21:37 --

kotenok gav в сообщении #1462160 писал(а):

Там ведь нет этих namespace.

Так а должны быть

-- 12.05.2020, 21:38 --

Смотрите https://developer.mozilla.org/en-US/doc ... eElementNS

[kotenok gav]

Geen в сообщении #1462162 писал(а):

На моём сайте, если интересно, можете

Не могу, он у меня не открывается (по-моему, это уже было когда-то).

-- 13 май 2020, 05:10 --

Geen в сообщении #1462162 писал(а):

Так а должны быть

-- 12.05.2020, 21:38 --

Смотрите https://developer.mozilla.org/en-US/doc ... eElementNS

Понял, кажется, ща поправлю.

-- 13 май 2020, 05:12 --

Так?
В песочнице не работает, проверить "просто так" пока не могу.

[Connector]

kotenok gav,

let d = document.createElementNS("http://www.w3.org/2000/svg", "polygon");
d.setAttribute("points", "0,0 100,0 50,100");
d.setAttribute("fill", "orange");
d.setAttribute("stroke", "black");
d.onclick = function (event) {
  alert(1);
};
document.querySelector("svg").append(d);

Так работает.

[kotenok gav]

Connector, спасибо! Теперь работает даже в песочнице, вижу.

[Geen]

Да, прошу прощения, про атрибуты это я погорячился (подзабыл уже)

[kotenok gav]

Все равно не работает... Приведу фрагмент из реального кода:

Используется синтаксис Javascript

let draw = document.createElement("svg");
draw.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
draw.setAttribute('version', '1.1');
draw.setAttribute('xmlns:xlink', 'http://www.w3.org/1999/xlink');
draw.setAttribute('width', '500');
draw.setAttribute('height', '420');
game.append(draw);
let tail = document.createElementNS("http://www.w3.org/2000/svg", "polygon");
tail.setAttribute('points', '10,10 100,10 55,100');
tail.setAttribute('fill', 'orange');
tail.setAttribute('stroke', 'black');
tail.onclick = function(event) {
        alert('1');
};
draw.append(tail);

Мб это из-за xmlns:xlink? Но ни

Используется синтаксис Javascript

let draw = document.createElementNS("http://www.w3.org/2000/svg", "svg");
draw.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
draw.setAttribute('version', '1.1');
draw.setAttributeNS("http://www.w3.org/2000/svg", 'xmlns:xlink', 'http://www.w3.org/1999/xlink');
draw.setAttribute('width', '500');
draw.setAttribute('height', '420');
game.append(draw);
let tail = document.createElementNS("http://www.w3.org/2000/svg", "polygon");
tail.setAttribute('points', '10,10 100,10 55,100');
tail.setAttribute('fill', 'orange');
tail.setAttribute('stroke', 'black');
tail.onclick = function(event) {
        alert('1');
};
draw.append(tail);

, ни

Используется синтаксис Javascript

let draw = document.createElement("svg");
draw.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
draw.setAttribute('version', '1.1');
draw.setAttributeNS("http://www.w3.org/2000/svg", 'xmlns:xlink', 'http://www.w3.org/1999/xlink');
draw.setAttribute('width', '500');
draw.setAttribute('height', '420');
game.append(draw);
let tail = document.createElementNS("http://www.w3.org/2000/svg", "polygon");
tail.setAttribute('points', '10,10 100,10 55,100');
tail.setAttribute('fill', 'orange');
tail.setAttribute('stroke', 'black');
tail.onclick = function(event) {
        alert('1');
};
draw.append(tail);

не работают, выводит "DOMException: Failed to execute 'setAttributeNS' on 'Element': 'http://www.w3.org/2000/svg' is an invalid namespace for attributes.".

-- 13 май 2020, 23:46 --

Нашел ошибку, теперь так (но тоже не работает, но, по крайней мере, уже не возвращает ошибку):

Используется синтаксис Javascript

let draw = document.createElement("svg");
draw.setAttribute('xmlns', 'http://www.w3.org/2000/xmlns/');
draw.setAttribute('version', '1.1');
draw.setAttributeNS('http://www.w3.org/2000/xmlns/', 'xmlns:xlink', 'http://www.w3.org/1999/xlink/');
draw.setAttribute('width', '500');
draw.setAttribute('height', '420');
game.append(draw);
let tail = document.createElementNS("http://www.w3.org/2000/svg/", "polygon");
tail.setAttribute('points', '10,10 100,10 55,100');
tail.setAttribute('fill', 'orange');
tail.setAttribute('stroke', 'black');
tail.onclick = function(event) {
        alert('1');
};
draw.append(tail);

[Connector]

Могу предложить костылик:

Используется синтаксис Javascript

game.insertAdjacentHTML(
  "beforeend",
  '<svg id = "draw" width ="500" style = "height: 420px"></svg>'
);
const draw = game.querySelector("#draw");
draw.setAttribute("xmlns", "http://www.w3.org/2000/svg"); // это, кстати, необязательно.
//draw.setAttribute("version", "1.1"); // устаревший атрибут
game.append(draw);
let tail = document.createElementNS("http://www.w3.org/2000/svg", "polygon");
tail.setAttribute("points", "10,10 100,10 55,100");
tail.setAttribute("fill", "orange");
tail.setAttribute("stroke", "black");
tail.onclick = function (event) {
  alert("1");
};
draw.append(tail);

По поводу устаревших и необязательных атрибутов см. https://developer.mozilla.org/en-US/doc ... lement/svg

[Aritaborian]

kotenok gav в сообщении #1462314 писал(а):

тоже не работает, но, по крайней мере, уже не возвращает ошибку

С вашей точки зрения, это лучше?

[kotenok gav]

Ну, переписал вот так:

Используется синтаксис Javascript

game.innerHTML += '<svg id="draw" width="500" height="420"></svg>';
let draw = document.getElementById("draw");
let tail = document.createElementNS("http://www.w3.org/2000/svg/", "polygon");
tail.setAttribute('points', '10,10 100,10 55,100');
tail.setAttribute('fill', 'orange');
tail.setAttribute('stroke', 'black');
tail.onclick = function(event) {
        alert('1');
};
draw.append(tail);

Все равно не работает.

-- 14 май 2020, 04:04 --

Aritaborian в сообщении #1462393 писал(а):

С вашей точки зрения, это лучше?

Это говорит о том, что было две ошибки в коде, и уже одну удалось исправить.

[Aritaborian]

kotenok gav, не обращайте внимания; скорее всего, мой комментарий был бесполезен.

[Connector]

kotenok gav, знающие люди подсказали:

Используется синтаксис Javascript

let draw = document.createElementNS("http://www.w3.org/2000/svg", "svg");
draw.setAttributeNS(null, "viewBox", "0 0 " + 500 + " " + 420);
draw.setAttributeNS(null, "width", 500);
draw.setAttributeNS(null, "height", 420);
draw.style.display = "block"; // необязательно 
game.append(draw);
// далее без изменений.

kotenok gav в сообщении #1462397 писал(а):

http://www.w3.org/2000/svg/

А здесь последний слеш был лишний.

[kotenok gav]

Спасибо! Проверю завтра.