Масштабируемая векторная графика (SVG) — мощный и популярный формат для создания интерактивной и масштабируемой графики в Интернете. В сочетании с TypeScript манипуляции с SVG становятся еще более надежными и управляемыми. В этой статье блога мы рассмотрим различные методы управления SVG с помощью TypeScript, а также приведем примеры кода, демонстрирующие их использование.

1. Создание элемента SVG:
   Чтобы создать элемент SVG динамически, вы можете использовать метод createElementNSиз объекта documentи установить соответствующее пространство имен. для SVG.

const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute("width", "200");
svg.setAttribute("height", "200");
document.body.appendChild(svg);

1. Добавление фигур.
   Вы можете добавлять различные фигуры в SVG с помощью TypeScript. Например, чтобы добавить прямоугольник:

const rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
rect.setAttribute("x", "50");
rect.setAttribute("y", "50");
rect.setAttribute("width", "100");
rect.setAttribute("height", "100");
rect.setAttribute("fill", "blue");
svg.appendChild(rect);

1. Изменение атрибутов.
   Вы можете изменить атрибуты существующих элементов SVG с помощью TypeScript. Например, изменение цвета фигуры:

const shape = document.getElementById("shapeId") as SVGElement;
shape.setAttribute("fill", "red");

1. Анимация элементов SVG.
   Элементы SVG можно анимировать с помощью TypeScript. Вот пример анимации положения круга:

const circle = document.getElementById("circleId") as SVGCircleElement;
circle.animate([{ cx: "0" }, { cx: "200" }], { duration: 1000, iterations: Infinity });

1. Обработка событий.
   Вы можете добавить прослушиватели событий к элементам SVG с помощью TypeScript. Например, прослушивание события щелчка на фигуре:

const shape = document.getElementById("shapeId") as SVGElement;
shape.addEventListener("click", () => {
  console.log("Shape clicked!");
});

В этой статье мы рассмотрели несколько методов управления SVG с помощью TypeScript. Мы рассмотрели создание элементов SVG, добавление фигур, изменение атрибутов, анимацию элементов и обработку событий. Используя возможности проверки типов и инструментов TypeScript, вы можете создавать надежную и интерактивную графику SVG для своих веб-приложений.