Возможна ли перерисовка SVG
 

Здравствуйте!
Подскажите, есть ли возможность перерисовки SVG типа как перерисовать канвас?

Вот сверстал такой пример:

<div class="testSVG">
    <svg viewBox="0 0 180 100" style="fill: #f7f7f7;stroke: #ccc; stroke-width: 2px; display: block; width: 180px; height: 100px;">
        <polygon points="2,2 178,2 178,98 2,98"></polygon>
    </svg>
</div>
<button id="teeest">Добавить линию в SVG</button>

<script>
    document.querySelector('#teeest').addEventListener('click', function () {
            let line = document.createElement('line');
            line.setAttribute('stroke', 'violet');
            line.setAttribute('stroke-width', 5);
            line.setAttribute('x1', 0);
            line.setAttribute('y1', 0);
            line.setAttribute('x2', 180);
            line.setAttribute('y2', 100);

            document.querySelector('.testSVG svg').appendChild(line);
        })
</script>

Если нажать кнопку "Добавить линию в SVG", то в HTML видно как добавляется во внутрь SVG элемент line, но он неотрисовуется.
Его можно как то перерисовать, типа как канвас? или для таких задач нужно использовать канвас, а SVG для этого не предназначен?

MC-XOBAHCK,

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

рони, СПАСИБО! Да, так работает.
А вы не знаете, протокол http не будет создавать проблем для сайтов работающих на протоколе https ?
Сама ссылка на w3 перенаправляет на https, но если изменить протокол в указанном фрагменте js, то добавленный элемент в svg неотрисовывается.

Нашёл ответ в документации к createElementNS():

Valid URI:
HTML - использование http://www.w3.org/1999/xhtml
SVG - использование http://www.w3.org/2000/svg
XBL - использование http://www.mozilla.org/xbl
XUL - использование http://www.mozilla.org/keymaster/gat...re.is.only.xul

Кстати интересное направление поиска дырок для mitm атак... могло бы быть.)