Mafungu ya Kina ya SVG

和

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

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

SVG

例子 1

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

第一个例子偏移了一个矩形（使用 , <feBlend>）：

Hii ni kifaa cha 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>

Kufikia kwa kufanyia

Muhtasari wa kifaa

  • Inayopewa kipimo cha id kwa kumieleza jina la kifilteri kina <filter>
  • <rect> inayopewa kipimo cha filter kinasambaza kina "f1" kifilteri

Mfano 2

Sasa, inaweza kufanana na upele wa picha (kwa kutumia <feGaussianBlur>）：

Hii ni kifaa cha 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>

Kufikia kwa kufanyia

Muhtasari wa kifaa

  • <feGaussianBlur> inayopewa kipimo cha kufanana cha stdDeviation

Mfano 3

Sasa, tukamataa miguu wa kijani:

Hii ni kifaa cha 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>

Kufikia kwa kufanyia

Muhtasari wa kifaa

  • <feOffset> inayotumia inaingia "SourceAlpha", inayotumia chuki cha Alpha kwa sababu ya matokeo ya RGBA kina matokeo

Mfano 4

Sasa, tukamataa miguu wa rangi moja:

Hii ni kifaa cha 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>

Kufikia kwa kufanyia

Muhtasari wa kifaa

  • <feColorMatrix> Filtri huziwa inayotumia kubadilisha rangi ya taswira ya kifupi kwa rangi inayofanana na kijani. Wakati wa watatu '0.2' wa matriksi inayotumika kwa kila mazingira wa kichwa, kichwa, na kina. Kuharibika watu hizi kina kina inaingia rangi inayofanana na kijani (kijani kina 0)