突袭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的支持程度都不同，具体的效果仍是本身试试后再使用吧。转自天翼空间