[MC-XOBAHCK]

Здравствуйте!
Подскажите, есть ли возможность перерисовки 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 для этого не предназначен?