最新的Web開發教程
 

SVG模糊效果


<DEFS>和<filter>

所有互聯網SVG過濾器是一種內定義的<defs>元素。 在<defs>元素是短期的定義和含有特殊元素的定義(such as filters)

<filter>元素用於定義SVG濾鏡。 該<filter>元素標識過濾器所需的id屬性。 然後該圖形指向過濾器使用。


SVG <feGaussianBlur>

例1

<feGaussianBlur>元素被用來創建模糊效果:

fegaussianblur

下面是SVG代碼:

<svg height="110" width="110">
  <defs>
    <filter id="f1" x="0" y="0">
      <feGaussianBlur in="SourceGraphic" stdDeviation="15" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3"
  fill="yellow" filter="url(#f1)" />
</svg>
試一試»

Code explanation:

  • id的屬性<filter>元素定義了一個唯一的名稱為過濾器
  • 模糊效果與定義的<feGaussianBlur>元素
  • in="SourceGraphic"部分定義了影響整個元素創建
  • stdDeviation屬性定義模糊量
  • filter的屬性<rect>元素中的元素鏈接到"f1"過濾器