Создать пустой элемент с помощью createElement из DOM - PullRequest
0 голосов
/ 11 мая 2018

Проблема в том, что я хочу динамически создавать SVG-файл с помощью JavaScript.Но при рисовании пути он не отображается на экране (последние 2 ~ 3 часа я ищу проблему) ... И вот оно ... при создании элемента с document.createElement мы получаем <element> </element>,Но элемент пути должен быть создан как пустой элемент - <path .../>.Так.Как я могу создать пустые элементы, используя document.createElement?Или, может быть, я не могу сделать это с document.createElement и должен использовать JQuery для этого?

let b1b2 = document.createElement('path');
b1b2.setAttribute('d', 'M0 0 L100 100');
b1b2.setAttribute('fill', 'none');
b1b2.setAttribute('stroke', 'red');
b1b2.setAttribute('stroke-width', '5');

<path d="M0 0 L100 100" fill="none" stroke="red" stroke-width="5"></path>

1 Ответ

0 голосов
/ 11 мая 2018

SVG предъявляет особые требования к пространству имен. Вам необходимо использовать document.createElementNS :

document.createElementNS('http://www.w3.org/2000/svg', 'path');

Пример:

let b1b2 = document.createElementNS('http://www.w3.org/2000/svg', 'path');

b1b2.setAttribute('d', 'M0 0 L100 100');
b1b2.setAttribute('fill', 'none');
b1b2.setAttribute('stroke', 'red');
b1b2.setAttribute('stroke-width', '5');

document.getElementById('svg').appendChild(b1b2);
<svg id="svg"></svg>
...