突襲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>
 轉自：天翼空間