Единицы измерения для градиентов

Snap.svg позволяет создавать сложные градиенты и управлять ими с высокой точностью. Одним из ключевых аспектов является понимание единиц измерения, используемых при задании координат градиентов. В Snap.svg градиенты задаются в виде строк, но за ними скрывается точная система координат, которую важно понимать для корректного отображения.

Типы градиентов и их координаты

Snap.svg поддерживает два типа градиентов: линейные и радиальные.

  1. Линейный градиент (linearGradient) Линейный градиент задаётся следующими параметрами:

    element.attr({
    fill: "l(х1, y1, x2, y2)#color1-#color2"
});
    • x1, y1 — координаты начала градиента.
    • x2, y2 — координаты конца градиента.

  2. Радиальный градиент (radialGradient) Радиальный градиент задаётся так:

    element.attr({
    fill: "r(cx, cy, r)#color1-#color2"
});
    • cx, cy — центр градиента.
    • r — радиус градиента.

Процентные и абсолютные единицы

В Snap.svg координаты градиентов могут быть заданы в двух форматах:

  1. Процентные значения

    • Диапазон от 0 до 1.

    • Пример для линейного градиента:

      element.attr({
    fill: "l(0, 0, 1, 1)#ff0000-#0000ff"
});

      В этом случае градиент растягивается по всей ширине и высоте элемента: (0,0) — верхний левый угол, (1,1) — нижний правый угол.

    • Пример для радиального градиента:

      element.attr({
    fill: "r(0.5, 0.5, 0.5)#ffffff-#000000"
});

      Центр градиента находится в середине элемента, радиус равен половине ширины/высоты (в зависимости от минимальной стороны).

  2. Абсолютные значения

    • Задаются в пикселях или других единицах SVG.

    • Пример:

      element.attr({
    fill: "l(0, 0, 200, 200)#00ff00-#ff00ff"
});

      Градиент растягивается до координат (200,200) относительно системы координат SVG-элемента.

Важно: Snap.svg автоматически интерпретирует значения <1 как относительные (процентные) и значения ≥1 как абсолютные, если единицы явно не указаны.

Привязка к системе координат элемента

  • Градиент можно привязать к координатам элемента или к координатам контейнера (userSpaceOnUse).

  • Атрибут gradientUnits управляет этой привязкой:

    • userSpaceOnUse — координаты берутся из системы всего SVG.
    • objectBoundingBox — координаты нормализуются относительно размеров элемента (0–1).

Пример:

var grad = paper.gradient("l(0,0,1,1)#f00-#00f");
grad.node.setAttribute("gradientUnits", "userSpaceOnUse");
element.attr({fill: grad});

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

Ключевые точки градиента

Snap.svg поддерживает несколько цветовых остановок:

element.attr({
    fill: "l(0,0,1,1)#ff0:0-#f00:0.5-#00f:1"
});
  • Формат #color:position
  • position — число от 0 до 1, определяющее точку цветовой остановки относительно длины градиента.

Для радиальных градиентов:

element.attr({
    fill: "r(0.5,0.5,0.5)#fff:0-#000:1"
});
  • Цветовые точки растягиваются радиально от центра к краю.

Трансформация градиентов

Snap.svg позволяет трансформировать градиенты независимо от элемента через метод gradientTransform:

grad.transform("r45,0.5,0.5");
  • r45 — поворот на 45°
  • 0.5,0.5 — точка вокруг которой происходит вращение (нормализованная координата)

Также можно масштабировать и сдвигать:

grad.transform("s2,2,0,0 t10,20");
  • s2,2 — масштабирование по X и Y
  • t10,20 — смещение в пикселях

Эти трансформации учитывают исходные координаты градиента, заданные через единицы измерения.

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

  • Процентные единицы удобно использовать для адаптивных элементов, где размеры могут меняться.
  • Абсолютные единицы подходят для фиксированных рисунков с точным позиционированием.
  • Для анимации градиентов лучше использовать относительные координаты, чтобы плавно изменять точки остановок и позиции.
  • GradientUnits userSpaceOnUse рекомендуется для градиентов, которые должны оставаться статичными при изменении размеров элементов.

Эта система единиц и координат позволяет создавать гибкие и точные градиенты, управлять их масштабированием, вращением и положением, обеспечивая высокий уровень контроля при работе с SVG в Snap.svg.

Оглавление