Symbol и use

Snap.svg предоставляет удобный механизм для создания повторяющихся элементов через объекты Symbol и их использование с помощью use. Это позволяет экономить ресурсы при работе с большим количеством одинаковых графических объектов и упрощает поддержку кода.

Создание Symbol

Символ в Snap.svg представляет собой шаблон графического элемента, который можно многократно использовать без дублирования исходного кода. Создание символа осуществляется с помощью метода Snap.symbol():

var s = Snap("#svg"); // Инициализация SVG-контейнера

var circleSymbol = s.symbol();
circleSymbol.circle(0, 0, 50).attr({
    fill: "#3498db",
    stroke: "#2980b9",
    strokeWidth: 4
});
  • Snap.symbol() создаёт контейнер для элементов.
  • Внутри символа можно добавлять любые SVG-объекты: circle, rect, path, text и группы g.
  • Атрибуты элементов внутри символа задаются так же, как и обычные SVG-элементы через .attr().

Привязка Symbol к контейнеру

После создания символа его необходимо вставить в SVG-документ через метод use:

var instance = s.use(circleSymbol);
instance.attr({
    x: 100,
    y: 100
});
  • s.use(symbol) создаёт экземпляр символа, который можно перемещать, масштабировать и изменять независимо от оригинала.
  • Позиционирование осуществляется через атрибуты x и y.
  • Любые изменения в оригинальном символе автоматически отражаются на всех экземплярах, если изменять сам Symbol, а не отдельный экземпляр.

Использование нескольких экземпляров

Символы особенно полезны при множественных повторениях одного и того же элемента:

for (var i = 0; i < 5; i++) {
    var inst = s.use(circleSymbol);
    inst.attr({
        x: 100 + i * 120,
        y: 200,
        fill: "#e74c3c" // Можно менять атрибуты для каждого экземпляра
    });
}
  • Каждому экземпляру можно задавать свои атрибуты (fill, stroke, transform).
  • Экземпляры полностью независимы друг от друга, но не дублируют внутреннюю структуру символа, что экономит память и ускоряет отрисовку.

Применение трансформаций

Экземпляры символа можно трансформировать с помощью метода .transform():

var inst = s.use(circleSymbol);
inst.transform("translate(300,50) scale(1.5) rotate(45)");
  • translate(x, y) — перемещение.
  • scale(k) — масштабирование, можно использовать два аргумента scale(kx, ky).
  • rotate(angle, cx, cy) — вращение вокруг точки (cx, cy). Если точки нет, вращение происходит вокруг (0,0).

Трансформации применяются только к конкретному экземпляру, не затрагивая оригинальный Symbol.

Вложенные символы

В Snap.svg символы могут содержать другие символы:

var innerSymbol = s.symbol();
innerSymbol.rect(0, 0, 40, 40).attr({ fill: "#2ecc71" });

var outerSymbol = s.symbol();
outerSymbol.use(innerSymbol).attr({ x: 10, y: 10 });
outerSymbol.circle(50, 50, 25).attr({ fill: "#f1c40f" });

s.use(outerSymbol).attr({ x: 200, y: 100 });
  • Вложенные символы позволяют создавать сложные композиции.
  • Вложенный экземпляр наследует базовую структуру, но отдельные атрибуты можно изменять при вставке.

Управление атрибутами экземпляров

Экземпляры Symbol поддерживают динамическое изменение атрибутов через .attr():

var inst = s.use(circleSymbol);
inst.attr({
    fill: "#9b59b6",
    stroke: "#8e44ad",
    strokeWidth: 6
});
  • Можно менять цвета, размеры, прозрачность, фильтры.
  • Атрибуты изменяются только для данного экземпляра.

Преимущества использования Symbol и use

  1. Экономия ресурсов — SVG хранит один шаблон, а не дублирует его несколько раз.
  2. Удобство управления — изменение исходного символа отражается на всех экземплярах.
  3. Гибкость трансформаций — каждый экземпляр можно масштабировать, вращать и позиционировать независимо.
  4. Поддержка вложенности — сложные графические элементы можно строить из более простых символов.

Практические примеры

  1. Иконки интерфейса: кнопки, стрелки, маркеры. Один символ = много кнопок.
  2. Анимация объектов: символы можно анимировать через .animate(), изменяя положение, цвет, масштаб.
  3. Схемы и диаграммы: одинаковые элементы повторяются без дублирования кода.
var starSymbol = s.symbol();
starSymbol.path("M10,0 L12,7 L20,7 L14,11 L16,18 L10,14 L4,18 L6,11 L0,7 L8,7 Z")
    .attr({ fill: "#f39c12" });

for (var i = 0; i < 5; i++) {
    var star = s.use(starSymbol);
    star.transform(`translate(${i*50},50) scale(2)`);
}
  • В этом примере пять экземпляров звезды используют один и тот же символ, экономя память и позволяя менять все звезды одновременно через изменения starSymbol.

Symbol и use в Snap.svg — мощный инструмент для построения повторяющихся, анимационных и сложных SVG-композиций, обеспечивающий экономию ресурсов, удобство и гибкость управления графикой.

Оглавление