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