Прозрачность (opacity)

В Snap.svg прозрачность элементов задаётся с помощью атрибута opacity. Этот атрибут определяет степень видимости графического объекта: значение 1 означает полную непрозрачность, а 0 — полную прозрачность. Прозрачность может применяться к отдельным фигурам, группам (<g>), тексту и даже изображениям.

var s = Snap("#svgCanvas");
var circle = s.circle(100, 100, 50);
circle.attr({
    fill: "blue",
    opacity: 0.5
});

В примере выше создаётся круг с радиусом 50 пикселей, заполненный синим цветом и прозрачностью 50%.

Атрибут opacity и его диапазон значений

Атрибут opacity принимает числовые значения от 0 до 1, включая дробные.

  • 0 — полностью прозрачный элемент, невидимый на холсте.
  • 0.25 — элемент виден на четверть.
  • 0.5 — элемент наполовину прозрачный.
  • 1 — полностью непрозрачный элемент.

Snap.svg позволяет менять этот атрибут динамически после создания объекта:

circle.attr({opacity: 0.8}); // увеличиваем непрозрачность до 80%

Это особенно полезно для анимаций и эффектов появления/исчезновения.

Прозрачность заливки и обводки

Snap.svg различает прозрачность заливки (fill-opacity) и обводки (stroke-opacity). Это позволяет создавать сложные визуальные эффекты, когда контур фигуры остаётся полностью видимым, а внутренняя заливка прозрачна.

var rect = s.rect(50, 50, 150, 100);
rect.attr({
    fill: "red",
    "fill-opacity": 0.3,
    stroke: "black",
    "stroke-opacity": 1
});
  • fill-opacity управляет прозрачностью заливки.
  • stroke-opacity управляет прозрачностью линии контура.
  • Атрибут opacity действует на весь элемент одновременно, включая и заливку, и контур.

Группы и наследование прозрачности

Прозрачность применяется не только к отдельным элементам, но и к группам (<g>). Если задать opacity для группы, все дочерние элементы будут отображаться с этой прозрачностью, комбинируя её с собственной.

var group = s.group(
    s.circle(100, 100, 40).attr({fill: "green"}),
    s.rect(70, 70, 60, 60).attr({fill: "orange"})
);
group.attr({opacity: 0.6});

В этом примере круг и прямоугольник внутри группы становятся полупрозрачными одновременно.

Если отдельный элемент внутри группы имеет своё значение opacity, результирующая прозрачность рассчитывается как произведение двух коэффициентов:

// Элемент opacity = 0.5 внутри группы opacity = 0.8
// Итоговая видимость: 0.5 * 0.8 = 0.4

Анимация прозрачности

Snap.svg поддерживает плавную анимацию изменения прозрачности с помощью метода animate. Это позволяет создавать эффекты появления, исчезновения и мерцания.

circle.animate({opacity: 0}, 1000, mina.easeinout);

В примере круг плавно исчезает в течение 1 секунды. Возможные функции интерполяции (mina.linear, mina.easein, mina.easeout, mina.easeinout) позволяют задавать различное ускорение анимации.

Анимацию прозрачности можно комбинировать с изменением цвета, положения и размера:

rect.animate({opacity: 0.2, transform: "s1.5"}, 1500, mina.easeinout);

Прозрачность и слои

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

  • Элементы, добавленные позже, находятся поверх предыдущих.
  • Атрибут opacity суммируется визуально с нижележащими слоями, создавая эффект полупрозрачного наложения.
var bottom = s.rect(0, 0, 200, 200).attr({fill: "blue"});
var top = s.rect(50, 50, 100, 100).attr({fill: "yellow", opacity: 0.5});

Здесь верхний жёлтый прямоугольник отображается как полупрозрачный поверх синего.

Использование прозрачности для интерактивных эффектов

Прозрачность удобно использовать для визуальной обратной связи при наведении курсора или клике:

circle.hover(
    function() { this.attr({opacity: 1}); },
    function() { this.attr({opacity: 0.5}); }
);

Метод hover позволяет менять opacity при наведении и возвращать исходное значение при уходе курсора, создавая эффект подсветки.

Практические рекомендации

  • Использовать opacity вместо изменения цвета, если требуется прозрачный эффект без изменения оттенка.
  • Для сложных графических объектов с обводкой и заливкой лучше комбинировать fill-opacity и stroke-opacity.
  • Анимации прозрачности помогают сделать интерфейс динамичным и интуитивным.
  • Прозрачность групп эффективна для управления видимостью нескольких элементов одновременно.

Применение этих подходов позволяет создавать выразительные, визуально насыщенные SVG-графики с плавными эффектами и контролем над каждым элементом сцены.

Оглавление