Полилинии SVG отображаются только после изменения HTML в инспекторе - PullRequest
Новая
       23

Полилинии SVG отображаются только после изменения HTML в инспекторе

0 голосов
/ 06 февраля 2020

Мой код добавляет полилинии в SVG, но они не отображаются.

Но если я открою инспектор (F12 на Chrome), найду их в источнике, щелкну на них правой кнопкой мыши, отредактирую как HTML, добавлю пробел и нажму enter, они будут отрисованы!

Что мне здесь не хватает? 

function drawLine(x1, y1, x2, y2) {
    var line = document.createElement("polyline");
    line.style.cssText = "fill:none;stroke:black;stroke-width:2";

    var linePoints = `${x1},${y1} ${x2},${y2}`;
    line.setAttribute('points', linePoints);

    window.linesContainer.appendChild(line);
}

enter image description here

Edit1 :

Что-то интересное изначально полилиния имеет размеры 0pxw и 0pxh

enter image description here

. После изменения она получает размер:

enter image description here

1 Ответ

3 голосов
/ 06 февраля 2020

Для не HTML элементов (в данном случае SVG) вы должны использовать createElementNS, хотя вы не должны использовать setAttributeNS с пространством имен SVG

Итак, новый код: 

var svg_NS = 'http://www.w3.org/2000/svg';
var svg = document.getElementById('svg');
function drawLine(x1, y1, x2, y2) {
    var line = document.createElementNS(svg_NS, "polyline");
    line.style.cssText = "fill:none;stroke:black;stroke-width:2";
    
    var linePoints = `${x1},${y1} ${x2},${y2}`;
    line.setAttribute('points', linePoints);
    
    window.linesContainer.appendChild(line);
}
    
drawLine(0,0,200,200)
<svg id="linesContainer"></svg>

Подробнее:

https://developer.mozilla.org/en-US/docs/Web/SVG/Namespaces_Crash_Course { ссылка }

...