SVG-фильтр для создания тени | rpilot62.ru | Рубрика: Кодинг

❮ ПредыдущаяСледующая Глава ❯


<DEFS> и <фильтр>

Все фильтры SVG определены в <defs> элемента. <defs> элемент короток для определений и содержит определение специальных элементов (such as filters) .

<filter> элемент используется для определения SVG фильтр. <filter> элемент имеет обязательный атрибут ID , который идентифицирует фильтр. Графический затем указывает на фильтр для использования.


SVG <feOffset>

Пример 1

<feOffset> Элемент используется для создания эффектов отбрасывания тени.

Идея заключается в том , чтобы взять SVG графику (image or element) и переместите его немного в плоскости ху.

Первый пример смещает прямоугольник (with <feOffset>) , а затем смешать оригинал на верхней части изображения смещения (with <feBlend>) :

Вот код SVG:

пример

<svg height="120" width="120">
  <defs>
    <filter id="f1" x="0" y="0" width="200%" height="200%">
      <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
      <feBlend in="SourceGraphic" in2="offOut" mode="normal" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3"
  fill="yellow" filter="url(#f1)" />
</svg>

Попробуй сам "

Code explanation:

  • id атрибут <filter> элемент определяет уникальное имя для фильтра
  • filter атрибут <rect> элемент связывает элемент с "f1" фильтр

Пример 2

Теперь, смещение изображения может быть размыта (with <feGaussianBlur>) :

Вот код SVG:

пример

<svg height="140" width="140">
  <defs>
    <filter id="f2" x="0" y="0" width="200%" height="200%">
      <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
      <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
      <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3"
  fill="yellow" filter="url(#f2)" />
</svg>

Попробуй сам "

Code explanation:

  • stdDeviation атрибут <feGaussianBlur> элемент определяет величину размытия

Пример 3

Теперь сделайте тень черный:

Вот код SVG:

пример

<svg height="140" width="140">
  <defs>
    <filter id="f3" x="0" y="0" width="200%" height="200%">
      <feOffset result="offOut" in="SourceAlpha" dx="20" dy="20" />
      <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
      <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3"
  fill="yellow" filter="url(#f3)" />
</svg>

Попробуй сам "

Code explanation:

  • in атрибуте <feOffset> элемента изменяется на "SourceAlpha" , который использует альфа — канал для размытия вместо всего RGBA пикселя

Пример 4

Теперь, рассматривать тень как цвет:

Вот код SVG:

пример

<svg height="140" width="140">
  <defs>
    <filter id="f4" x="0" y="0" width="200%" height="200%">
      <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
      <feColorMatrix result="matrixOut" in="offOut" type="matrix"
      values="0.2 0 0 0 0 0 0.2 0 0 0 0 0 0.2 0 0 0 0 0 1 0" />
      <feGaussianBlur result="blurOut" in="matrixOut" stdDeviation="10" />
      <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3"
  fill="yellow" filter="url(#f4)" />
</svg>

Попробуй сам "

Code explanation:

  • <feColorMatrix> фильтр используется для преобразования цвета в изображении смещения ближе к черному. Три значения '0,2' в матрице все получают умножаются на красный, зеленый и синий каналы. Снижение их ценности приносит цвета ближе к черному (black is 0)

❮ ПредыдущаяСледующая Глава ❯

Вы не можете изменить цвет изображения таким образом. Если вы загружаете SVG в качестве изображения, вы не можете изменить способ его отображения с помощью CSS или Javascript в браузере.

Если вы хотите изменить изображение SVG, вам нужно загрузить его с помощью , или с помощью inline.

Если вы хотите использовать методы на странице, вам нужна библиотека Modernizr, где вы можете проверить поддержку SVG и условно отобразить или не возвращать изображение. Затем вы можете встроить SVG и применить стили, которые вам нужны.

См. http://jsfiddle.net/helderdarocha/6uRgS/

Вы можете встроить свой SVG, пометить резервное изображение с именем класса ():

И в CSS используйте класс от Modernizr (CDN: http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.7.2.js), чтобы проверить поддержку SVG. Если поддержка SVG отсутствует, блок SVG будет проигнорирован, и изображение будет отображаться, иначе изображение будет удалено из дерева DOM ():

Затем вы можете изменить цвет вашего встроенного элемента:

ответ дан helderdarocha 07 марта '14 в 17:39

источникподелиться

LuckyIcon — Скачать иконки бесплатно

Скачать иконки бесплатно: готовые наборы иконок

Мы подготовили наборы бесплатных иконок для программных продуктов.
Вы можете скачать иконки из этих наборов совершенно бесплатно и использовать их Royalty Free в соответствии с лицензионным соглашением.
Если имеющихся в наборах иконок недостаточно, мы можем изготовить иконки на заказ.


Набор иконок Office Style Icon Set v2.0

Оформите Ваши программные продукты в привычном миллионам пользователям Microsoft® Office стиле с помощью набора иконок Office Style Icon Set.

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

Набор иконок Office Style Icon Set v2.0 содержит:

  • 147 иконок для панелей иструментов и меню
  • иконки в 32bit и 256-цветной палитре
  • все иконки в PNG, GIF, BMP и ICO форматах
  • все иконки в двух размерах — 32×32 и 16×16 пикселов

Все иконки из набора


Набор иконок Basic Icon Set v1.2

Придайте Вашей программе современный вид с новым набором иконок. Комплект из наиболее часто используемых пиктограмм для панелей инструментов и меню. Все самые необходимые иконки от меню «Файл» до «Справка» в стиле Windows XP.

Набор иконок Basic Icon Set v1.2 содержит:

  • 53 иконки для панелей иструментов и меню
  • иконки в 32bit и 256-цветной палитре
  • все иконки в PNG, GIF, BMP и ICO форматах
  • иконки в трех размерах — 32×32, 24×24 и 16×16 пикселов
  • обычное, активное и неактивное состояние каждой иконки

Все иконки из набора

Добавить комментарий

Закрыть меню