Понятие stroke и fill

Графика формата SVG (Scalable Vector Graphics) описывает изображение с помощью векторных примитивов: линий, кривых, фигур и контуров. В основе визуального отображения лежат два ключевых свойства: stroke и fill. Они определяют, каким образом отображается граница фигуры и её внутренняя область.

Библиотека Vivus, предназначенная для анимации SVG, активно использует именно контуры (stroke), поэтому понимание различий между этими свойствами критично для корректной работы анимации.

Свойство stroke: контур фигуры

Stroke задаёт внешний контур SVG-элемента. Это линия, проходящая по границе фигуры или пути.

Основные параметры stroke

  • stroke — цвет линии:
<path d="M10 10 L100 100" stroke="black" />
  • stroke-width — толщина линии:
<path d="M10 10 L100 100" stroke="black" stroke-width="2" />

  • stroke-linecap — форма концов линии:

    • butt — обрезанный край
    • round — закруглённый
    • square — квадратный
<path d="M10 10 L100 10" stroke="black" stroke-width="5" stroke-linecap="round" />

  • stroke-linejoin — соединение углов:

    • miter
    • round
    • bevel

  • stroke-dasharray — пунктирная линия:

<path d="M10 10 L100 100" stroke="black" stroke-dasharray="5,5" />

Свойство fill: заливка фигуры

Fill определяет цвет внутренней области фигуры.

<circle cx="50" cy="50" r="40" fill="red" />

Если значение не указано, по умолчанию используется чёрный цвет (black), за исключением случаев, когда явно задано fill="none".

Примеры использования

  • Сплошная заливка:
<rect x="10" y="10" width="100" height="50" fill="blue" />
  • Отключение заливки:
<rect x="10" y="10" width="100" height="50" fill="none" stroke="black" />

Взаимодействие stroke и fill

SVG-элемент может одновременно иметь и заливку, и контур:

<circle cx="50" cy="50" r="40" fill="yellow" stroke="black" stroke-width="3" />

Ключевые особенности:

  • fill заполняет внутреннюю область
  • stroke рисует границу
  • при отсутствии stroke контур не отображается
  • при fill="none" фигура становится прозрачной внутри

Роль stroke в библиотеке Vivus

Библиотека Vivus анимирует SVG за счёт постепенного “прорисовывания” линий. Это достигается манипуляцией параметрами:

  • stroke-dasharray
  • stroke-dashoffset

Vivus не работает с заливкой напрямую. Анимация возможна только для контуров, поэтому:

  • все анимируемые элементы должны иметь stroke
  • часто используется fill="none", чтобы сосредоточиться на линиях

Пример SVG для Vivus

<svg viewBox="0 0 100 100">
  <path d="M10 50 L90 50" stroke="black" fill="none" />
</svg>

Если у элемента есть заливка, она появится сразу, без анимации, что нарушает эффект “рисования”.

Почему fill мешает анимации

Vivus имитирует процесс рисования линии, но:

  • fill появляется мгновенно
  • не существует встроенного механизма “постепенной заливки” в Vivus

Это приводит к визуальным проблемам:

  • фигура уже заполнена цветом, хотя контур ещё не нарисован
  • теряется иллюзия последовательного рисования

Решение:

<path d="..." stroke="black" fill="none" />

или:

  • сначала анимировать stroke
  • затем через CSS или JS добавить fill

Комбинирование с CSS

Свойства stroke и fill могут задаваться через CSS:

path {
  stroke: black;
  fill: none;
  stroke-width: 2;
}

Это удобно при работе с Vivus, так как:

  • можно централизованно управлять стилями
  • легко менять внешний вид после анимации

Анимация fill после stroke

Частый приём — добавление заливки после завершения анимации Vivus:

new Vivus('my-svg', {
  duration: 200
}, function() {
  document.querySelectorAll('path').forEach(function(el) {
    el.style.fill = 'blue';
  });
});

Таким образом достигается эффект:

  1. контур “рисуется”
  2. затем фигура “заливается”

Оптимизация SVG для Vivus

Перед использованием важно подготовить SVG:

  • удалить лишние fill:
fill="none"
  • убедиться, что все пути имеют stroke
  • объединить сложные фигуры в path

Инструменты вроде Adobe Illustrator или Inkscape часто экспортируют SVG с заливками по умолчанию, что требует ручной корректировки.

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

  • Использовать fill="none" для всех анимируемых элементов
  • Настраивать толщину линий через stroke-width для лучшей визуализации
  • Избегать сложных заливок (градиенты, паттерны) на этапе анимации
  • Разделять этапы: сначала stroke-анимация, затем fill

Частые ошибки

1. Отсутствие stroke

<path d="..." fill="black" />

Результат: Vivus не анимирует элемент

2. Наличие fill без отключения

<path d="..." stroke="black" fill="red" />

Результат: заливка появляется сразу

3. Слишком тонкий stroke

stroke-width="0.1"

Результат: линия почти невидима при анимации

Визуальная логика работы

При использовании Vivus:

  • stroke = путь, который “рисуется”
  • fill = декоративный элемент, добавляемый позже

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

Итоговая схема использования

  1. SVG с путями:
<path d="..." stroke="black" fill="none" />

  1. Запуск Vivus

  2. Добавление fill после завершения

Понимание различий между stroke и fill позволяет не только правильно использовать Vivus, но и глубже контролировать визуальное поведение SVG-графики в целом.

Оглавление