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). И стили к нему не применяются. В чём моя ошибка? |
Навскидку:
document.body.appendChild(svg); |
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> |
рони,
Спасибо! Заменил всего лишь одну строчку и всё заработало, даже стили подтянулись из CSS let svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); |
Часовой пояс GMT +3, время: 09:42. |