突襲HTML5之SVG 2D入門10-3

   <g enable-background="new" transform="translate(810,0)">

    <desc>第四幅是在圖形元素上使用濾鏡效果desc>
    <rect x="25" y="25" width="100" height="100" fill="red"/>
    <g opacity=".5">
      <circle cx="125" cy="75" r="45" fill="green"/>
      <polygon points="160,25 160,125 240,75" fill="blue"
               filter="url(#ShiftBGAndBlur)"/>
    g>
    <rect x="5" y="5" width="260" height="260" fill="none" stroke="blue"/>
  g>

  <g enable-background="new" transform="translate(1080,0)">
    <desc>第五幅是在圖形元素上使用不一樣的濾鏡效果desc>
    <rect x="25" y="25" width="100" height="100" fill="red"/>
    <g opacity=".5">
      <circle cx="125" cy="75" r="45" fill="green"/>
      <polygon points="160,25 160,125 240,75" fill="blue"
               filter="url(#ShiftBGAndBlur_WithSourceGraphic)"/>
    g>
    <rect x="5" y="5" width="260" height="260" fill="none" stroke="blue"/>
  g>
svg>

      效果圖以下(第一排是最終效果圖，第二排是濾鏡效果)：

      這個例子包含5個部分：
  1.第一組中的圖片，沒用使用任何濾鏡效果。
  2.第二組使用同樣的圖片，可是開啓了使用背景的效果。
  3.第三組使用同樣的圖片，可是在內部的容器了使用了濾鏡效果。
  4.第四組在內容容器的元素上使用了濾鏡效果。
  5.最後一組使用了與第四組相同的濾鏡效果併合並源圖片後生成的效果。

      濾鏡的概念其實很簡單，只不過是每一個效果的代碼看起來比較複雜，其實咱們試一下就很清楚了，不過因爲不一樣的瀏覽器對SVG的支持程度都不同，具體的效果仍是本身試試後再使用吧。轉自天翼空間