Инструменты пользователя

Инструменты сайта


svg_add_items

Назад

С помощью стандартного 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>