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