鍍金池/ 教程/ HTML/ SVG模糊效果
SVG鏈接
SVG陰影效果
SVG線性漸變
SVG文本
SVG平面陰影
SVG圖表
SVG交互
SVG時鐘
SVG漸變
SVG <pattern>元素
SVG簡介
SVG徑向漸變
SVG <filter>元素
SVG對話框效果
SVG形狀
SVG stroke屬性
SVG圖形
SVG教程
SVG事件監(jiān)聽器
SVG加載器示例
SVG腳本(JavaScript)
SVG圖標
SVG拖動
SVG模糊效果

SVG模糊效果

SVG使用<feGaussianBlur>元素來顯示模糊效果。 Internet Explorer 9和更早版本不支持SVG篩選器

示例

<!DOCTYPE html>  
<html>  
<body>  


<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>  

</body>  
</html>

解析

  • <filter>的id屬性為模式定義了一個唯一的名稱。
  • <feGaussianBlur>元素用于定義模糊效果。
  • <feGaussianBlur>元素的in =“SourceGraphic”部分用于定義為整個元素創(chuàng)建的效果。
  • stdDeviation屬性用于定義模糊量。
  • <rect>元素的filter屬性用于將元素鏈接到“p1”過濾器。

執(zhí)行上面示例代碼，得到以下結果 -


上一篇：SVG時鐘下一篇：SVG &lt;filter&gt;元素