突袭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>

转自：天翼空间