Линейные градиенты SVG

<defs> и <filter>

Все SVG-фильтры находятся в <defs> определены в элементе.<defs> Элемент является аббревиатурой от definitions и содержит определения специальных элементов (например, фильтров).

<filter> Элемент используется для определения SVG-фильтра.<filter> Элемент имеет обязательный атрибут id, который используется для идентификации фильтра. Затем графика указывает на фильтр, который нужно использовать.

SVG <feOffset>

Пример 1

<feOffset> Элемент используется для создания тени. Идея заключается в том, чтобы сначала получить SVG-графику (изображение или элемент), а затем слегка переместить его на xy-плоскости.

В первом примере смещен矩形 (используя <feOffset>），затем смешайте исходное изображение с смещенным изображением вверху (используя <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="зеленый" stroke-width="3"
  fill="желтый" filter="url(#f1)" />
</svg>

Попробуйте сами

Комментарий к коду:

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

Пример 2

Теперь можно размыть изображение с смещением (используя <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="зеленый" stroke-width="3"
  fill="желтый" filter="url(#f2)" />
</svg>

Попробуйте сами

Комментарий к коду:

• <feGaussianBlur> элемента свойство stdDeviation определяет степень размытия

Пример 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="зеленый" stroke-width="3"
  fill="желтый" filter="url(#f3)" />
</svg>

Попробуйте сами

Комментарий к коду:

• <feOffset> элемента изменен в свойстве in на "SourceAlpha", он использует Alpha канал вместо всего 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="зеленый" stroke-width="3"
  fill="желтый" filter="url(#f4)" />
</svg>

Попробуйте сами

Комментарий к коду:

• <feColorMatrix> Фильтр используется для преобразования цветов смещенного изображения в более темные. Три значения '0.2' в матрице умножаются на красный, зеленый и синий каналы. Уменьшение их значений делает цвета ближе к черному (черный - 0)