Добавление элемента внутрь тэга

@TAVulator · Регистрация: 27.07.2009

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

Приветствую!
Может не правильно назвал тему, ну да ладно.
Проблема вот в чем:

есть кусок HTML:

HTML5
1
2
3
4
5
    <div id="svg_canvas" style="width:600px; height:400px">
        <svg id="svg_paper" width="200" height="100" xmlns="http://www.w3.org/2000/svg">
            <rect x="50" y="40" width="100" height="30" fill="blue"/>
        </svg>
    </div>

как добавить новый элемент в тег svg c помощью javascript?
Чтобы получилось вот так:

HTML5
1
2
3
4
5
6
    <div id="svg_canvas" style="width:600px; height:400px">
        <svg id="svg_paper" width="200" height="100" xmlns="http://www.w3.org/2000/svg">
            <rect x="50" y="40" width="100" height="30" fill="blue"/>
            <rect x="70" y="60" width="100" height="30" fill="red"/>
        </svg>
    </div>

@skaa · 22.03.2011, 22:22

Я бы сделал так:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<html>
    <head>
        <title>tAddIH.html</title>
        <script>
        function fnOC()
        {
            var oi;
            
            oi=document.getElementById('svg_paper');
            oi.innerHTML+='<rect x="70" y="60" width="100" height="30" fill="red"/>';
        }
        </script>
    </head>
    <body>
    <div id="svg_canvas" style="width:600px; height:400px">
        <svg id="svg_paper" width="200" height="100" xmlns="http://www.w3.org/2000/svg">
            <rect x="50" y="40" width="100" height="30" fill="blue"/>
        </svg>
    </div>
        <input type='button' value='Add' onClick='fnOC();'/>
    </body>
</html>

@TAVulator · 22.03.2011, 23:02 **[ТС]**

skaa, не срабатывает...

@skaa · 23.03.2011, 00:20

У меня тоже не сработало потому что я не знаю что должно произойти. Но если попробовать так:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!--https://www.cyberforum.ru/javascript/thread262104.html-->
<html>
    <head>
        <title>tAddIH.html</title>
        <script>
        function fnOC()
        {
            var oi;
            
            oi=document.getElementById('svg_paper');
//          oi.innerHTML+='<rect x="70" y="60" width="100" height="30" fill="red"/>';
            oi.innerHTML+='<input type="button" value="abcd"/>';
        }
        </script>
    </head>
    <body>
    <div id="svg_canvas" style="width:600px; height:400px">
        <svg id="svg_paper" width="200" height="100" xmlns="http://www.w3.org/2000/svg">
            <rect x="50" y="40" width="100" height="30" fill="blue"/>
        </svg>
    </div>
        <input type='button' value='Add' onClick='fnOC();'/>
    </body>
</html>

, то сразу будет видно результат (появится кнопка). Так что аналогично тег <rect... тоже должен появиться. Проверил в Firefox и IE.

@TAVulator · 23.03.2011, 00:28 **[ТС]**

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

, то сразу будет видно результат (появится кнопка).

тоже не работает. проверил в Chrome и IE9

@Kdn · 23.03.2011, 14:18

TAVulator,

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<html>
        <head>
                <title>tAddIH.html</title>
                <script>
            
                
                function fnOC()
                {           
        var svgNS = "http://www.w3.org/2000/svg",                   
             r = document.createElementNS(svgNS,'rect'),
                    svg = document.createElementNS(svgNS,'svg');
                            
        svg.setAttribute('version','1.1');
        svg.setAttribute('width','600');
        svg.setAttribute('width','400');
                    
        r.setAttribute('x','70');
        r.setAttribute('y','60')
        r.setAttribute('width','100')
        r.setAttribute('height','30')
        r.setAttribute('fill','red')
                                
        svg.appendChild(r)
        
                        var oi=document.getElementById('svg_canvas');
                        oi.appendChild(svg);
                }
                </script>
        </head>
        <body>
    <div id="svg_canvas" style="width:600px; height:400px">
    </div>
                <input type='button' value='Add' onClick='fnOC();'/>
        </body>
</html>

Только по моему в IE не будет работать.

@TAVulator · 23.03.2011, 15:40 **[ТС]**

Kdn, это получается он каждый раз добавляет новый холст SVG, а как сделать, чтобы добавлялся новый элемент в существующий холст?

@Kdn · 23.03.2011, 20:19

TAVulator, ты поподробнее объясни. Ты как вообще на страницу <svg> добавляешь, прямо в HTML? Используешь какой нить фрэймворк?
Ты можешь скриптом добавить холст, например после загрузки страницы и хранить ссылку на него в переменной. Ну а потом, соответстсвенно, и добавлять графику в этот единственный холст.
Насколько я понимаю нужна кроссбраузерность. Но этот метод допустим у меня в IE8 не работает, ругается на document.createElementNS.
Там по моему через vml нужно.

Добавлено через 9 минут
Могу посоветовать фрэймворк Raphael

@TAVulator · 24.03.2011, 00:55 **[ТС]**

с помощью Raphael реализовал то, что мне нужно. Спасибо.

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer 8Observer8 08.02.2026 Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .	SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .	SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .
SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .

@TAVulator ⚽ 4191 / 1292 / 237 Регистрация: 27.07.2009 Сообщений: 3,962
	22.03.2011, 23:02 [ТС]
	skaa, не срабатывает... 0

@TAVulator ⚽ 4191 / 1292 / 237 Регистрация: 27.07.2009 Сообщений: 3,962
	23.03.2011, 15:40 [ТС]
	Kdn, это получается он каждый раз добавляет новый холст SVG, а как сделать, чтобы добавлялся новый элемент в существующий холст? 0

@Kdn 307 / 165 / 25 Регистрация: 07.02.2011 Сообщений: 319
	23.03.2011, 20:19
	TAVulator, ты поподробнее объясни. Ты как вообще на страницу <svg> добавляешь, прямо в HTML? Используешь какой нить фрэймворк? Ты можешь скриптом добавить холст, например после загрузки страницы и хранить ссылку на него в переменной. Ну а потом, соответстсвенно, и добавлять графику в этот единственный холст. Насколько я понимаю нужна кроссбраузерность. Но этот метод допустим у меня в IE8 не работает, ругается на document.createElementNS. Там по моему через vml нужно. Добавлено через 9 минут Могу посоветовать фрэймворк Raphael 1

@TAVulator ⚽ 4191 / 1292 / 237 Регистрация: 27.07.2009 Сообщений: 3,962
	24.03.2011, 00:55 [ТС]
	с помощью Raphael реализовал то, что мне нужно. Спасибо. 0

Опции темы