Кодинг
★ Рубрика: Кодинг
★ Тема: графика

Фильтр Гаусса для svg-изображения

SVG-графика приобретает все большую популярность. Особенно с распространением адаптивных шаблонов ее роль стала решающей. Качественное изображение признак того, что вы попали на приличный сайт. Согласитесь, картинка слева привлекает внимание и хочется понять как она устроена. Это - векторная графика в формате svg. Кстати, попробуйте ее скопировать. Не получилось? Вот вам и защита от копипаста. Но, это изображение не просто нарисовано. Оно получено из изображения круга применением фильтра. Степень размытия можно регулировать, цвет менять, размеры круга тоже. Вкратце поясним некоторые элементы изображения: тег circle> – это круг, аттрибуты cx, cy – задают положение центра круга, fill – заливка, r – радиус. Сам фильтр определяется в секции defs с помощью тега filter. Ему необходимо задать id (уникальный в контексте всего документа). У нас это id="myFilter1". Внутри описываются типы применяемой фильтрации. В нашем примере это feGaussianBlur, где атрибут stdDeviation регулирует уровень размытия. Забегая вперед, скажем, что спецификация определяет несколько типов фильтрации с большим количеством возможных атрибутов для настройки их параметров. Далее к той части SVG, которая должна быть обработана фильтром, нужно добавить атрибут filter="url(#myFilter1)" с указанием id фильтра. Ну и собственно, дальше код фильтра:
Фильтр был применен к изображению окружности:
Если вас заинтересовал этот пример, то его полный код можно получить здесь.
 Похожие публикации: графика

Войдите, чтобы добавить Ваш ответ. [ Регистрация | Вход ]

Онлайн всего: 2
Гостей: 2
Пользователей: 0