Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   SVG созданный через JS (https://javascript.ru/forum/misc/83084-svg-sozdannyjj-cherez-js.html)

MC-XOBAHCK 09.09.2021 08:45
SVG созданный через JS
 
Подскажите, возможно ли создавать 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 09.09.2021 09:23
Навскидку:
document.body.appendChild(svg);

рони 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 09.09.2021 10:10
рони,
Спасибо! Заменил всего лишь одну строчку и всё заработало, даже стили подтянулись из CSS

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


Часовой пояс GMT +3, время: 03:07.