Повторная реализация svg линии не работает - PullRequest
Новая
       16

Повторная реализация svg линии не работает

0 голосов
/ 08 декабря 2018

Я уже провел черту с этим точным кодом, но при повторной реализации его в другом проекте что-то не работает. 

let main = document.getElementById('main');
let svg = document.createElement('svg');
let newLine = document.createElement('line');
svg.setAttribute('style', `position: fixed;display: block;`);

newLine.setAttribute('x1', 0);
newLine.setAttribute('y1', 0);
newLine.setAttribute('x2', 500);
newLine.setAttribute('y2', 500);
newLine.setAttribute('style', `stroke:red;stroke-width:100;`);
svg.appendChild(newLine);
main.appendChild(svg);

До того, как я запустил сервер Express и JSDOM, чтобы заполнить div взатем документ с помощью svg отправляет innerhtml элемента документа в качестве тела при маршрутизации на «/», не самый эффективный способ сделать это, но я просто играл с инструментами, которые мы изучали в классе.Когда я вставляю приведенный ниже код в мой HTML, черная линия отображается, как и должно быть, поэтому я чувствую, что пропускаю какой-то маленький кусочек ... 

<svg width="500" height="500"> 
 <line x1="50" y1="50" x2="350" y2="350" stroke="black" />
</svg>

Ответы [ 2 ]

0 голосов
/ 09 декабря 2018

Вам необходимо использовать createElementNS при создании элементов svg и line, в противном случае он просто считает, что они составлены как теги, а не как SVG.

Кроме того, поскольку вы неиспользуя переменные в setAttribute, вы должны избегать интерполяции строк и просто использовать одинарные кавычки вместо обратных галочек.

Solution 

let main = document.getElementById('main');
let svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
let newLine = document.createElementNS('http://www.w3.org/2000/svg','line');
svg.setAttribute('style', 'position: fixed;display: block;');

newLine.setAttribute('x1', 0);
newLine.setAttribute('y1', 80);
newLine.setAttribute('x2', 100);
newLine.setAttribute('y2', 20);
newLine.setAttribute('style', 'stroke:red;stroke-width:100;');
svg.appendChild(newLine);
main.appendChild(svg);
<div id="main"></div>

Документация

https://developer.mozilla.org/en-US/docs/Web/API/Document/createElementNS

0 голосов
/ 09 декабря 2018

Разобрался, нужно было использовать приведенный ниже код при объявлении моего svg 

const svgTop = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
...