Gradiente lineal de SVG

<defs>和<filter>

所有SVG滤镜都在 <defs> 元素中定义。<defs> 元素是定义（definitions）的缩写，包含对特殊元素（比如滤镜）的定义。

<filter> 元素用于定义SVG滤镜。<filter> 元素有一个必需的id属性，用于标识滤镜。然后图形会指向要使用的滤镜。

SVG<feOffset>

例子 1

<feOffset> 元素用于创建阴影效果。思路是：首先获取一个SVG图形（图像或元素），然后在xy平面上稍微移动它。

第一个例子偏移了一个矩形（使用 <feOffset>），然后将原始图像混合到偏移图像的顶部（使用 <feBlend>）：

Este es el código 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>

Prueba personalmente

Explicación del código:

• <filter>元素的id属性定义了滤镜的唯一名称
• <rect>元素的filter属性将该元素链接到"f1"滤镜

例子 2

现在，可以模糊偏移图像了（使用 <feGaussianBlur>）：

Este es el código 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>

Prueba personalmente

Explicación del código:

• <feGaussianBlur>元素的stdDeviation属性定义模糊量

Ejemplo 3

Ahora, establece la sombra en negro:

Este es el código 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>

Prueba personalmente

Explicación del código:

• El atributo in del elemento <feOffset> se cambia a "SourceAlpha", que utiliza el canal Alpha en lugar de todo el píxel RGBA para el desenfoque

Ejemplo 4

Ahora, procesa la sombra con un color:

Este es el código 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>

Prueba personalmente

Explicación del código:

• <feColorMatrix> El filtro se utiliza para convertir los colores de la imagen desplazada en colores más cercanos al negro. Los tres valores '0.2' de la matriz se multiplican por los canales rojo, verde y azul. Reducir sus valores hace que los colores se acerquen más al negro (el negro es 0)