Эффекты SVG-фильтров: контур текста с feMorphology | В паутине

Эффекты SVG-фильтров: контур текста с feMorphology

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

<feMorphology> — одна из самых простых и в то же время эффектных операций фильтрации. Результаты ее применения к различным элементам в большинстве случаев предсказуемы.

Что такое морфинг?

Морфинг означает преобразование формы объекта.

Морфологический фильтр предлагает два способа преобразования формы:

  • erosion – сжатие;
  • dilation – расширение или растягивание.

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

Параметр radius задает величину расширения или количество соседних пикселей, используемых для модификации контрольного.

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

Не заморачивайтесь особенно техническими подробностями реализации. Важно понять, как работает этот примитив на визуальном уровне. Вы можете передать в radius одно значение для обеих осей или два – по одному для x- и y-осей.

Морфинг Изображений

Применение операции feMorphologe к изображениям дает предсказуемые результаты:

  • Размер картинки уменьшается (erode) или увеличивается (dilate).
  • В обоих случаях изображение выглядит «нарисованным» большой кистью, уменьшается количество мелких деталей.

Простейший код фильтра выглядит так:

Здесь мы сжимаем картинку на 3 пикселя. Обратите внимание изображение справа (результат) немного меньше левого (исходник):

Результат (справа) применения эффекта размывания к изображению слева

Теперь заменим оператор erode на dilate. Полученный эффект немного похож на предыдущий, но в то же время существенно отличается:

Результат (справа) применения операции dilate к изображению слева

Изображение в любом случае выглядит как нарисованная абстракция, а его размер изменяется по мере расширения или сжатия пикселей.

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

  • erode (значение по умолчанию) устанавливает для каждого канала пикселя (R, G, B, A) самое темное или самое прозрачное из значений его соседей;
  • dilate же выбирает самое яркое или наименее прозрачное значение.

Если применять feMorphologe к одноцветным элементам (например, к тексту), то никаких заметных изменений цвета, конечно, не произойдет. В этом случае имеет значение именно эффект сжатия/расширения.

Добавляем цветной контур

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

Проблема в том, что обводка stroke располагается на границе элемента так, что ее половина заходит на сам элемент. То есть текст становится тоньше, а это не всегда нам подходит.

С помощью примитива feMorphology можно накладывать контур, не задевая сам текст, то есть расширять его. Утолщенный таким образом текст может быть использован как входные данные для другого примитива фильтра.

Прежде чем мы начнем, оцените разницу между контурами stroke и feMorphology визуально:

А теперь шаг за шагом создадим что-то в таком роде:

Начнем с вывода текста в SVG и простой операции расширения с помощью feMorphology. Параметр radius определяется желаемой толщиной контура.

Примитив получает альфа-канал текста – его сплошь черную версию и увеличивает его на 4 пикселя.

Исходный текст выглядел вот так:

Уже догадались, как сделать контур?

Мы просто наложим исходный текст поверх расширенного. Таким образом эти дополнительные 4 пикселя будут выглядывать из-за него как рамка. Для наложения используем уже знакомый нам из первой статьи примитив feMerge.

Также контур нужно раскрасить. Это мы тоже уже делали. Примитив feFlood зальет все нужным цветом, а feComposite с оператором in ограничит заливку только границами текста.

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

Цвет самого текста можно указать либо в CSS, либо в элементе text с помощью атрибута fill. Цвет контура устанавливается в атрибуте flood-color примитива feFlood.

Вырезаем текст

Можно сделать также эффект «вырезанного текста» (knockout text) – при этом остается только обводка, а через сами буквы виден фон. Попробуем реализовать вот такой демо-пример:

Это еще проще, а код получится намного короче.

Вместо наслоения исходного текста поверх расширенного, мы будем использовать этот исходный текст для вырезания внутренней части расширенного. Таким образом, останется только добавленная толщина – то есть сам контур.

Используем для этого примитив feComposite с оператором out. Исходный текст будет сверху, а расширенный – фоном. Фильтр отрисует только те части фона, которые не перекрываются верхним слоем.

Добавим сюда еще красивый шрифт – вуа-ля!

Получилось круто.

Но что, если вы захотите изменить цвет контура? Придется снова использовать примитив feFlood и комбинировать контур с заливкой снова и снова? Нет, это было бы слишком утомительно, сделаем проще.

Вместо того, чтобы расширять голый альфа-канал текста (SourceAlpha), который всегда черный, можно расширить сам текст (SourceGraphic), который может быть любого цвета. В этом случае цвет контура всегда будет совпадать с цветом исходного текста и его можно будет легко поменять из CSS.

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

Наш улучшенный код теперь выглядит так:

В таблице стилей можно установить любой цвет контура и фона, можно поставить изображение или анимацию.

Этот SVG-фильтер легко можно применять и к HTML-элементам через CSS-свойство filter. При этом цвет контура будет определяться как всегда свойством color.

Та-дам!

Самое классное, что такой фильтр можно использовать как прогрессивное улучшение. Если браузер не поддерживает SVG-фильтры, или CSS-фильтры, или применение SVG к HTML-элементам, пользователь получит простой и доступный исходный текст без всяких эффектов.

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

В заключение

Используя всего два SVG-примитива фильтров, вы можете добавить тексту (в SVG или в HTML) эффект контура. Поместите созданный фильтр на страницу и используйте его так часто, как необходимо.

Комментарии (0)

Ваш email не будет опубликован. Все поля обязательны