Добавление SVG элемента через JS

@DrType · Регистрация: 07.09.2019

Author24 — интернет-сервис помощи студентам

Здравствуйте.

Возникла проблема с добавлением новых элементов SVG. Пробую так:

HTML5

 <svg xmlns="http://www.w3.org/2000/svg"
height="500" width="500">
 
</svg>

Javascript

 let circ=document.createElementNS("http://www.w3.org/2000/svg", 'circle');
circ.style.fill="red";
circ.style.r="200";
circ.style.cx="10";
circ.style.cy="100";
svg.appendChild(circ);

Пожалуйста, поясните, почему не работает, и покажите рабочий вариант.

@shvyrevvg · 02.12.2019, 16:47

DrType, а полный код можно, в этом вроде все норм - должно работать.

@DrType · 02.12.2019, 17:01 **[ТС]**

shvyrevvg, привожу полный код:

PHP/HTML

  <!DOCTYPE html> <html lang="ru-Ru">
 <head>  
 <meta charset="utf-8">  
 <title>SVG</title> 
 <style>
 </style>
 </head>
 <body>
 <svg xmlns="http://www.w3.org/2000/svg" id="pict" height="500" width="500">
 <circle cx="300" cy="300" r="200" fill="black"/>
 </svg>
 
<script>
var circ=document.createElementNS("http://www.w3.org/2000/svg", 'circle');
circ.style.fill="red";
circ.style.r="200";
circ.style.cx="100";
circ.style.cy="100";
svg.appendChild(circ);
</script>
</body> 
</html>

@shvyrevvg · 02.12.2019, 17:26

DrType, тогда у Вас svg undefined

Сообщение от DrType

Javascript

1	svg.appendChild(circ);

Добавлено через 1 минуту

PHP/HTML

  <!DOCTYPE html> <html lang="ru-Ru">
 <head>  
 <meta charset="utf-8">  
 <title>SVG</title> 
 <style>
 </style>
 </head>
 <body>
 <svg xmlns="http://www.w3.org/2000/svg" id="pict" height="500" width="500">
 <circle cx="300" cy="300" r="200" fill="black"/>
 </svg>
 
<script>
var svg = document.querySelector('#pict');
var circ=document.createElementNS("http://www.w3.org/2000/svg", 'circle');
circ.style.fill="red";
circ.style.r="200";
circ.style.cx="100";
circ.style.cy="100";
svg.appendChild(circ);
</script>
</body> 
</html>

@DrType · 02.12.2019, 17:38 **[ТС]**

shvyrevvg, точно!

Не по теме:

Пробовал разные варианты (сначала с методом createElement — безуспешно), и в конце концов позабыл ввести переменную.
Да, пустая получилась тема.
Но теперь у меня есть всё, чтобы начать писать анимированные картинки! :)

Работает.

@shvyrevvg · 02.12.2019, 17:42

Не по теме:

Сообщение от DrType

Пробовал разные варианты (сначала с методом createElement — безуспешно), и в конце концов позабыл ввести переменную.

DrType, в таких ситуациях нужен свежий взгляд :)

@shvyrevvg 1786 / 1036 / 445 Регистрация: 12.05.2016 Сообщений: 2,550
	02.12.2019, 16:47	2
	DrType, а полный код можно, в этом вроде все норм - должно работать. 0

@DrType Модератор 6279 / 3518 / 1050 Регистрация: 07.09.2019 Сообщений: 5,662 Записей в блоге: 1
	02.12.2019, 17:38 [ТС]	5
	shvyrevvg, точно! Не по теме: Пробовал разные варианты (сначала с методом createElement — безуспешно), и в конце концов позабыл ввести переменную. Да, пустая получилась тема. Но теперь у меня есть всё, чтобы начать писать анимированные картинки! :) Работает. 0

@shvyrevvg
	02.12.2019, 17:42 Добавление SVG элемента через JS #6
	Не по теме: Сообщение от DrType Пробовал разные варианты (сначала с методом createElement — безуспешно), и в конце концов позабыл ввести переменную. DrType, в таких ситуациях нужен свежий взгляд :) 0

Опции темы

Добавление SVG элемента через JS

Решение