|
滤镜总览
各种滤镜原子操作就不详述了，需要的时候查看官方文档即可。下面看一下这些操作的共性。除了"in"属性，下面的其他属性是所有原子操作都可用的。
x,y,width,height
这几个属性不多说了，它定义了滤镜原子起作用的区域，不妨成为"滤镜子区域"吧。这几个属性是受filter元素的作用区域限制的，默认情况下，取值分别是0,0,100%,100%。这些原子的作用区域超过filter元素的作用区域都不起作用。
result
存放该步操作的结果。指定了result以后，同一个filter元素的其他后续操作都可以用in来指定其为输入。这个参看上面的例子就知道了。如果省略了这个值，则只能作为紧挨着的下一步操作的隐式输入，注意如果紧挨着的下一步操作已经用in指定了输入，则以in指定的为准。
in
表示该步操作的输入。省略in属性的话，将会默认使用前一步的结果作为本步的输入，如果省略的是第一步的in，则会使用"SourceGraphic"作为值(参看下面的说明)。in属性可以引用前面result存放的值，也可以指定下面6个特殊的值：
SourceGraphic：这个值代表使用当前的图形元素作为操作的输入。
SourceAlpha：这个值代表使用当前图形元素的Alpha值作为操作的输入。
BackgroundImage：这个值代表使用当前的背景截图作为操作的输入。
BackgroundAlpha：这个值代表使用当前的背景截图的Alpha值作为操作的输入。
FillPaint：这个值使用当前图形元素的fill属性的值作为操作的输入。
StrokePaint：这个值使用当前图形元素的stroke属性的值作为操作的输入。
这些值中 BackgroundImage和BackgroundAlpha可能比较难以理解，下面重点看看这两个值。
访问背景截图
通常情况下，我们可以直接使用引用filter元素的元素的背景截图作为filter效果的源图片。代表这种输入的取值是BackgroundImage和BackgroundAlpha，前一个包含颜色和Alpha值，后一个只包含Alpha值。为了支持这种使用方式，还需要在引用filter元素的元素上显式的开启这个特性，这需要设置元素的enable-background属性。
enable-background = "accumulate | new [ <x> <y> <width> <height> ] | inherit"
这个属性只能用于容器元素，它定义了如何去截取背景截图。
new值代表：允许该容器的子元素访问容器的背景截图，并且该容器的子元素会渲染到背景中和设备上。
accumulate是默认值，它的效果取决于上下文：如果父辈容器元素使用了enable-background：new的话，那么该容器的所有图形元素都会参与背景的渲染。否则，说明父辈容器没有准备截取背景截图，该元素的图形元素显示只显示在设备上。
下面的例子演示了这些取值的效果：
复制代码 代码如下:
<svg viewBox="0 0 1350 270"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>使用背景截图的例子</title>
<desc>下面几个例子解释了不同情况下背景截图的使用情况</desc>
<defs>
<filter
filterUnits="userSpaceOnUse" x="0" y="0">
<desc>这个滤镜舍弃了源图片，而是使用背景截图</desc>
<feOffset in="BackgroundImage" dx="0" dy="125" />
<feGaussianBlur stdDeviation="8" />
</filter>
<filter
filterUnits="userSpaceOnUse" x="0" y="0">
<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" 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" fill="none" stroke="blue"/>
</g>
<g enable-background="new" transform="translate(270,0)">
<desc>第二幅是在容器上使用滤镜效果</desc>
<rect x="25" y="25" 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" fill="none" stroke="blue"/>
</g>
<g enable-background="new" transform="translate(540,0)">
<desc>第三幅是在内部容器上使用滤镜效果，注意与第二幅图的不同</desc>
<rect x="25" y="25" 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" fill="none" stroke="blue"/>
</g>
<g enable-background="new" transform="translate(810,0)">
<desc>第四幅是在图形元素上使用滤镜效果</desc>
<rect x="25" y="25" 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" fill="none" stroke="blue"/>
</g>
<g enable-background="new" transform="translate(1080,0)">
<desc>第五幅是在图形元素上使用不同的滤镜效果</desc>
<rect x="25" y="25" 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" fill="none" stroke="blue"/>
</g>
</svg>
效果图如下(第一排是最终效果图，第二排是滤镜效果)：
（编辑：焦作站长网）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
