2014 dxdy logo

Научный форум dxdy

Математика, Физика, Computer Science, Machine Learning, LaTeX, Механика и Техника, Химия,
Биология и Медицина, Экономика и Финансовая Математика, Гуманитарные науки




Начать новую тему Ответить на тему На страницу 1, 2, 3  След.
 
 Неработающий код (HTML + JS)
Сообщение12.05.2020, 21:20 


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

 Профиль  
                  
 
 Re: Неработающий код (HTML + JS)
Сообщение12.05.2020, 21:30 
Заслуженный участник
Аватара пользователя


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

-- 12.05.2020, 21:34 --

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

 Профиль  
                  
 
 Re: Неработающий код (HTML + JS)
Сообщение12.05.2020, 21:36 


21/05/16
3939
Аделаида
Geen в сообщении #1462158 писал(а):
Вообще говоря, на svg элементы свойства должны задаваться через setAttributeNS...

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

 Профиль  
                  
 
 Re: Неработающий код (HTML + JS)
Сообщение12.05.2020, 21:36 
Заслуженный участник
Аватара пользователя


01/09/13
3013

(Оффтоп)

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


-- 12.05.2020, 21:37 --

kotenok gav в сообщении #1462160 писал(а):
Там ведь нет этих namespace.

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

-- 12.05.2020, 21:38 --

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

 Профиль  
                  
 
 Re: Неработающий код (HTML + JS)
Сообщение12.05.2020, 21:39 


21/05/16
3939
Аделаида
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 --

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

 Профиль  
                  
 
 Re: Неработающий код (HTML + JS)
Сообщение12.05.2020, 21:50 


02/05/19
396
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);

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

 Профиль  
                  
 
 Re: Неработающий код (HTML + JS)
Сообщение12.05.2020, 21:57 


21/05/16
3939
Аделаида
Connector, спасибо! Теперь работает даже в песочнице, вижу.

 Профиль  
                  
 
 Re: Неработающий код (HTML + JS)
Сообщение12.05.2020, 22:05 
Заслуженный участник
Аватара пользователя


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

 Профиль  
                  
 
 Re: Неработающий код (HTML + JS)
Сообщение13.05.2020, 16:22 


21/05/16
3939
Аделаида
Все равно не работает... Приведу фрагмент из реального кода:
Используется синтаксис 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);

 Профиль  
                  
 
 Re: Неработающий код (HTML + JS)
Сообщение13.05.2020, 21:20 


02/05/19
396
Могу предложить костылик:
код: [ скачать ] [ спрятать ]
Используется синтаксис 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

 Профиль  
                  
 
 Re: Неработающий код (HTML + JS)
Сообщение13.05.2020, 21:25 
Аватара пользователя


11/06/12
9708
лучший.магия.интрига
kotenok gav в сообщении #1462314 писал(а):
тоже не работает, но, по крайней мере, уже не возвращает ошибку
С вашей точки зрения, это лучше?

 Профиль  
                  
 
 Re: Неработающий код (HTML + JS)
Сообщение13.05.2020, 21:33 


21/05/16
3939
Аделаида
Ну, переписал вот так:
Используется синтаксис 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 писал(а):
С вашей точки зрения, это лучше?

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

 Профиль  
                  
 
 Re: Неработающий код (HTML + JS)
Сообщение13.05.2020, 21:47 
Аватара пользователя


11/06/12
9708
лучший.магия.интрига
kotenok gav, не обращайте внимания; скорее всего, мой комментарий был бесполезен.

 Профиль  
                  
 
 Re: Неработающий код (HTML + JS)
Сообщение14.05.2020, 00:58 


02/05/19
396
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/

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

 Профиль  
                  
 
 Re: Неработающий код (HTML + JS)
Сообщение14.05.2020, 01:00 


21/05/16
3939
Аделаида
Спасибо! Проверю завтра.

 Профиль  
                  
Показать сообщения за:  Поле сортировки  
Начать новую тему Ответить на тему  [ Сообщений: 43 ]  На страницу 1, 2, 3  След.

Модераторы: Karan, maxal, Toucan, PAV, Супермодераторы



Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей


Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете добавлять вложения

Найти:
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group