Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 09.09.2021, 08:45
Аватар для MC-XOBAHCK
Профессор
Отправить личное сообщение для MC-XOBAHCK Посмотреть профиль Найти все сообщения от MC-XOBAHCK
 
Регистрация: 06.08.2017
Сообщений: 473

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). И стили к нему не применяются.

В чём моя ошибка?
Ответить с цитированием
  #2 (permalink)  
Старый 09.09.2021, 09:23
Аватар для Alexandroppolus
Профессор
Отправить личное сообщение для Alexandroppolus Посмотреть профиль Найти все сообщения от Alexandroppolus
 
Регистрация: 25.10.2016
Сообщений: 1,004

Навскидку:
document.body.appendChild(svg);
Ответить с цитированием
  #3 (permalink)  
Старый 09.09.2021, 09:27
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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>
Ответить с цитированием
  #4 (permalink)  
Старый 09.09.2021, 10:10
Аватар для MC-XOBAHCK
Профессор
Отправить личное сообщение для MC-XOBAHCK Посмотреть профиль Найти все сообщения от MC-XOBAHCK
 
Регистрация: 06.08.2017
Сообщений: 473

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

let svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Таблицы через JS Fireyon Общие вопросы Javascript 1 19.10.2017 00:39
Bootstrap сформировать выпадающий список на лету через js wadim Общие вопросы Javascript 0 11.09.2017 18:16
Получение background-image через js в ie wondertalik Javascript под браузер 3 13.12.2014 19:34
Вставка HTML кода и JS кода через innerHTML zhurchik AJAX и COMET 1 31.10.2014 17:32
Не работает JS после подгрузки div через ajax BoB AJAX и COMET 3 09.12.2011 03:03