突袭HTML5之SVG 2D入门10-2

 访问背景截图

      通常情况下，我们可以直接使用引用filter元素的元素的背景截图作为filter效果的源图片。代表这种输入的取值是BackgroundImage和BackgroundAlpha，前一个包含颜色和Alpha值，后一个只包含Alpha值。为了支持这种使用方式，还需要在引用filter元素的元素上显式的开启这个特性，这需要设置元素的enable-background属性。
enable-background = "accumulate | new [  ] | inherit"
      这个属性只能用于容器元素，它定义了如何去截取背景截图。
      new值代表：允许该容器的子元素访问容器的背景截图，并且该容器的子元素会渲染到背景中和设备上。
      accumulate是默认值，它的效果取决于上下文：如果父辈容器元素使用了enable-background：new的话，那么该容器的所有图形元素都会参与背景的渲染。否则，说明父辈容器没有准备截取背景截图，该元素的图形元素显示只显示在设备上。
      下面的例子演示了这些取值的效果：

< svg  width ="13.5cm"  height ="2.7cm"  viewBox ="0 0 1350 270"
     xmlns ="http://www.w3.org/2000/svg"  version ="1.1" >
   < title >使用背景截图的例子 title>
  <desc>下面几个例子解释了不同情况下背景截图的使用情况desc>

  <defs>
    <filter id="ShiftBGAndBlur" 
            filterUnits="userSpaceOnUse" x="0" y="0" width="1200" height="400">
      <desc>这个滤镜舍弃了源图片，而是使用背景截图desc>
      <feOffset in="BackgroundImage" dx="0" dy="125" />
      <feGaussianBlur stdDeviation="8" />
    filter>
    <filter id="ShiftBGAndBlur_WithSourceGraphic" 
            filterUnits="userSpaceOnUse" x="0" y="0" width="1200" height="400">
      <desc>这个滤镜特效同时融合了背景截图和当前元素的图片desc>
      <feOffset in="BackgroundImage" dx="0" dy="125" />
      <feGaussianBlur stdDeviation="8" result="blur" />
      <feMerge>
        <feMergeNode in="blur"/>
        <feMergeNode in="SourceGraphic"/>
      feMerge>
    filter>
  defs>

  <g transform="translate(0,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"/>
    g>
    <rect x="5" y="5" width="260" height="260" fill="none" stroke="blue"/>
  g>

  <g enable-background="new" transform="translate(270,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"/>
    g>
    <g filter="url(#ShiftBGAndBlur)"/>
    <rect x="5" y="5" width="260" height="260" fill="none" stroke="blue"/>
  g>

  <g enable-background="new" transform="translate(540,0)">
    <desc>第三幅是在内部容器上使用滤镜效果，注意与第二幅图的不同desc>
    <rect x="25" y="25" width="100" height="100" fill="red"/>
    <g filter="url(#ShiftBGAndBlur)" opacity=".5">
      <circle cx="125" cy="75" r="45" fill="green"/>
      <polygon points="160,25 160,125 240,75" fill="blue"/>
    g>
    <rect x="5" y="5" width="260" height="260" fill="none" stroke="blue"/>
  g>
 转自：天翼空间