Инструменты пользователя
Содержание
С помощью стандартного DOM-интерфейса в JavaScript есть возможность создавать SVG-элементы.
Создание элемента
Чтобы создать новый элемент SVG – необходимо используется метод document.createElementNS(NS,type element) в данном методе необходимо указать пространство имен и тип элемента.
//Пространство имен SVG var NS = "http://www.w3.org/2000/svg"; // Создаем элемент var rootSvg = document.createElementNS(NS, "svg");
В данном случае мы только создали абстрактный элемент, который нигде не выводится.
Добавление созданного элемента в DOM
Добавить новый элемент в DOM можно методом appendChild.
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>SVG</title> <script> window.onload = function() { var container = document.getElementById("svgContainer"); //Пространство имен SVG var NS = "http://www.w3.org/2000/svg"; // Создаем главный элемент var rootSvg = document.createElementNS(NS, "svg"); // задаем атрибуты rootSvg.setAttribute("width", "300"); rootSvg.setAttribute("height", "300"); //Помещение в контейнер container.appendChild(rootSvg); //Создаем круг задаем атрибуты и помещяем его в rootSvg var circle = document.createElementNS(NS, "circle"); circle.setAttribute("cx", "100"); circle.setAttribute("cy", "100"); circle.setAttribute("r", "60"); circle.setAttribute("fill", "#336699"); rootSvg.appendChild(circle); }; </script> </head> <body> <div id="svgContainer"></div> </body> </html>
Метод appendChild всегда добавляет элемент последним в список детей.
Добавление элемента в конкретное место
Новый элемент можно добавить не только в конец, но и перед нужным элементом. Для этого используется метод insertBefore родительского элемента. Он работает так же, как и appendChild, но принимает вторым параметром элемент, перед которым нужно вставлять.
window.onload = function() { var container = document.getElementById("svgContainer"); //Пространство имен SVG var NS = "http://www.w3.org/2000/svg"; // Создаем главный элемент var rootSvg = document.createElementNS(NS, "svg"); // задаем атрибуты rootSvg.setAttribute("width", "300"); rootSvg.setAttribute("height", "300"); //Помещение в контейнер container.appendChild(rootSvg); //Создаем круг задаем атрибуты и помещаем его в rootSvg var circle = document.createElementNS(NS, "circle"); circle.setAttribute("cx", "100"); circle.setAttribute("cy", "100"); circle.setAttribute("r", "60"); circle.setAttribute("fill", "#336699"); rootSvg.appendChild(circle); //Создаем круг и помещаем его перед circle элементом var circle2 = document.createElementNS(NS, "circle"); circle2.setAttribute("cx", "50"); circle2.setAttribute("cy", "50"); circle2.setAttribute("r", "20"); circle2.setAttribute("fill", "#000"); rootSvg.insertBefore(circle2,circle); };
Удаление узла из DOM
Чтобы убрать узел из DOM- достаточно вызвать метод removeChild из его родителя.
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>SVG</title> </style> <script> window.onload = function() { var root = document.getElementById('elm'); var del = root.getElementsByTagName('circle')[1] root.removeChild(del) }; </script> </head> <body> <div id="svgContainer"> <svg id="elm" width="300" height="300"> <circle cx="50" cy="50" r="20" fill="#000"/> <circle cx="100" cy="100" r="60" fill="#336699"/> </svg> </div> </body> </html>
Инструменты страницы
