Манипуляция SVG с помощью JavaScript

Scalable Vector Graphics (SVG) — это формат векторной графики, широко используемый в веб-разработке. Одним из мощных инструментов для работы с SVG является JavaScript, который позволяет динамически изменять атрибуты, стили и поведение SVG-элементов.

В этой статье мы рассмотрим основные приемы манипуляции SVG с помощью JavaScript.

Доступ к SVG-элементам

Для того чтобы манипулировать SVG-элементами, нужно сначала получить доступ к ним с помощью JavaScript. Вот несколько способов:

Получение элемента по ID:

ВыделитьJavaScript

let svgCircle = document.getElementById('myCircle');

Получение элементов по классу:

ВыделитьJavaScript

let circles = document.getElementsByClassName('circle');

Получение всех элементов SVG:

ВыделитьJavaScript

let svgElements = document.querySelectorAll('svg *');

Изменение атрибутов SVG

Один из самых частых способов манипуляции SVG — это изменение атрибутов элементов. Вот несколько примеров:

Изменение цвета заливки и обводки:

ВыделитьJavaScript

let circle = document.getElementById('myCircle');
circle.setAttribute('fill', 'blue');
circle.setAttribute('stroke', 'red');
circle.setAttribute('stroke-width', '2');

Изменение размеров и положения:

ВыделитьJavaScript

let rectangle = document.getElementById('myRectangle');
rectangle.setAttribute('width', '100');
rectangle.setAttribute('height', '50');
rectangle.setAttribute('x', '50');
rectangle.setAttribute('y', '50');

Изменение пути (path):

ВыделитьJavaScript

let path = document.getElementById('myPath');
path.setAttribute('d', 'M10,10 L90,90 Z');

Анимация SVG с помощью JavaScript

JavaScript позволяет создавать плавные анимации SVG-элементов. Рассмотрим простой пример:

Пример: Анимация круга:

ВыделитьHTML

<svg width="200" height="200">
    <circle id="animatedCircle" cx="50" cy="50" r="40" fill="blue" />
</svg>

ВыделитьJavaScript

let circle = document.getElementById('animatedCircle');

function animateCircle() {
    let angle = 0;
    setInterval(() => {
        angle += 10;
        circle.setAttribute('cx', Math.cos(angle * Math.PI / 180) * 50 + 100);
        circle.setAttribute('cy', Math.sin(angle * Math.PI / 180) * 50 + 100);
    }, 100);
}

animateCircle();

Реактивные SVG-элементы

С помощью JavaScript можно сделать SVG-элементы интерактивными и реактивными на действия пользователя.

Пример: Hover-эффект на кругу:

ВыделитьHTML

<svg width="200" height="200">
    <circle id="interactiveCircle" cx="100" cy="100" r="40" fill="blue" />
</svg>

ВыделитьJavaScript

let interactiveCircle = document.getElementById('interactiveCircle');

interactiveCircle.addEventListener('mouseenter', () => {
    interactiveCircle.setAttribute('fill', 'red');
});

interactiveCircle.addEventListener('mouseleave', () => {
    interactiveCircle.setAttribute('fill', 'blue');
});

Заключение

JavaScript предоставляет богатый инструментарий для манипуляции SVG-элементами. С его помощью можно изменять атрибуты, создавать анимации и обеспечивать интерактивность. Это делает SVG незаменимым инструментом для современного веб-дизайна и разработки.

Экспериментируй, изучай и создавай удивительные SVG-эффекты для своих проектов!