SVG 模糊效果

SVG使用 <feGaussianBlur>元素顯示模糊效果。 <feGaussianBlur>濾鏡對(duì)輸入圖像進(jìn)行高斯模糊，Internet Explorer 9和更早版本不支持SVG篩選器.

<svg height="250" width="250">
  <defs>
    <filter id="p1" x="0" y="0">
      <feGaussianBlur in="SourceGraphic" stdDeviation="15" />
    </filter>
  </defs>
  <rect width="120" height="120" stroke="green" stroke-width="3" fill="purple" filter="url(#p1)" />
</svg>

運(yùn)行后生成的圖像效果如下：

用法解釋

• <filter> 的id屬性定義了模式的唯一名稱。

• <feGaussianBlur>元素用于定義模糊效果。

• <feGaussianBlur>元素的in =“ SourceGraphic”部分用于定義為整個(gè)元素創(chuàng)建的效果。

• 所述stdDeviation屬性用于定義模糊的量。

• <rect>元素的filter屬性用于將元素鏈接到“ p1”過濾器。