Форум

MC-XOBAHCK · #1 (**permalink**) 09.09.2021, 08:45

Подскажите, возможно ли создавать SVG при помощи JS ?

Делаю вот так:

<div class="body"></div>

let svg = document.createElement('svg');
svg.setAttribute('width', '200');
svg.setAttribute('height', '126');
svg.setAttribute('viewBox', '0 0 200 126');
svg.innerHTML = '<polygon points="1,1 200,1 200,62 1,62"></polygon>';

document.querySelector('.body').append(svg);

SVG создаётся правильно (его код), но он не отображается (у него размеры ширина/высота = 0 0). И стили к нему не применяются.

В чём моя ошибка?

Alexandroppolus · #2 (**permalink**) 09.09.2021, 09:23

Навскидку:
document.body.appendChild(svg);

рони · #3 (**permalink**) 09.09.2021, 09:27

MC-XOBAHCK,

<body>
    <div class="body"></div>
    <script>
        let svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');;
        svg.style.setProperty('width', '200px');
        svg.style.setProperty('height', '126px');
        svg.style.setProperty('fill', '#FF1493');
        svg.style.setProperty('stroke', '#8B4513');
        svg.style.setProperty('stroke-width', '2px');
        svg.setAttribute('viewBox', '0 0 200 126');
        let polygon = document.createElementNS('http://www.w3.org/2000/svg', 'polygon');
        polygon.setAttribute('points', '1,1 200,1 200,62 1,62');
        polygon.style.setProperty('fill', '#1E90FF');
        svg.append(polygon);
        document.querySelector('.body').append(svg);
    </script>
</body>

MC-XOBAHCK · #4 (**permalink**) 09.09.2021, 10:10

рони,
Спасибо! Заменил всего лишь одну строчку и всё заработало, даже стили подтянулись из CSS

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

Форум

Справочник

Discord чат

Курсы javascript