Толщина линии

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

var s = Snap(400, 400);
var circle = s.circle(200, 200, 50);

// Задание толщины линии
circle.attr({
    stroke: "#3498db",
    strokeWidth: 5
});

Здесь strokeWidth: 5 устанавливает толщину линии в 5 пикселей. Важно помнить, что значение strokeWidth влияет на визуальное восприятие фигуры, особенно при масштабировании и анимации.

Использование относительных единиц и масштабирование

Snap.svg работает с абсолютными значениями в пикселях, но при трансформации объектов (например, масштабировании через transform("s2")) толщина линий также изменяется. Для сохранения постоянной толщины линии при масштабировании можно использовать метод strokeWidth совместно с вычислением масштаба:

var rect = s.rect(50, 50, 100, 100);
rect.attr({
    stroke: "#e74c3c",
    strokeWidth: 4
});

// Масштабирование объекта в 2 раза
rect.transform("s2");
rect.attr({
    strokeWidth: 4 / 2  // корректировка толщины
});

Таким образом, толщина линии остаётся визуально одинаковой независимо от масштаба объекта.

Линии с разной толщиной и градиенты

Толщину линии можно комбинировать с различными эффектами, такими как градиенты, прозрачность или паттерны. Snap.svg позволяет применять градиенты к stroke точно так же, как и к fill.

var line = s.line(50, 350, 350, 350);
line.attr({
    stroke: s.gradient("l(0,0,1,0)#ff0000-#0000ff"),
    strokeWidth: 8
});

В этом примере линия получает линейный градиент и толщину 8 пикселей. Использование градиента на линии позволяет создавать визуально сложные эффекты без использования дополнительных фигур.

Анимация толщины линии

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

var path = s.path("M50 50 L350 50");
path.attr({
    stroke: "#2ecc71",
    strokeWidth: 2
});

// Анимация толщины линии до 10 пикселей за 1 секунду
path.animate({ strokeWidth: 10 }, 1000, mina.easeinout);

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

Комбинирование с другими атрибутами линии

Толщина линии часто используется совместно с другими свойствами, влияющими на контур:

  • stroke-linecap — форма конца линии (butt, round, square).
  • stroke-linejoin — способ соединения линий в многоугольниках (miter, round, bevel).
  • stroke-dasharray — создание штрихованных линий.
var poly = s.polygon([50, 300, 150, 250, 250, 300]);
poly.attr({
    stroke: "#9b59b6",
    strokeWidth: 6,
    strokeLinecap: "round",
    strokeLinejoin: "round",
    strokeDasharray: "10,5"
});

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

Динамическое управление толщиной линий

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

var ellipse = s.ellipse(200, 200, 80, 50);
ellipse.attr({
    stroke: "#f1c40f",
    strokeWidth: 3
});

// Увеличение толщины линии при наведении мыши
ellipse.hover(
    function() { this.attr({ strokeWidth: 10 }); },
    function() { this.attr({ strokeWidth: 3 }); }
);

Такой подход обеспечивает визуальную реакцию на действия пользователя без изменения структуры SVG.

Выводы по работе с толщиной линий

  • Толщина линии задаётся через strokeWidth в пикселях.
  • Для сохранения визуальной постоянности при масштабировании необходимо корректировать значение толщины.
  • Толщина линии может сочетаться с градиентами, анимацией, штриховкой и формой концов.
  • Программное управление атрибутом позволяет создавать интерактивные и динамичные графические элементы.

Контроль над strokeWidth является базовым инструментом для точной и выразительной работы с SVG в Snap.svg, позволяя создавать как простые графические объекты, так и сложные визуальные эффекты.

Оглавление