SVG filter 标签

简介

<filter> 作为滤镜的容器,本身不直接呈现效果,必须包含滤镜元素作为子元素才可以做出效果;

专有属性

  • x,、y、width 和 height 一起定义<filter>或者其滤镜源语子元素区域的范围,x,y 是开始位置,width和height分别是长和宽;但是单位有区别,使用 userSpaceOnUse 模式时候,单位和用户坐标一致如: x=”0″、y=”0″、width=”100″ 和 height=”200″,当使用 objectBoundingBox 模式时候,单位就变成分数或者百分比,如 x=”0%” y=”0%” width=”100%” 和 height=”200%”。
  • filterUnits 定义<filter>区域范围指定坐标系统;当 filterUnits=”objectBoundingBox” 以应用对象边框盒子做参照坐标(默认值,不设置默认此值)filterUnits=”userSpaceOnUse” 则以当前用户坐标做参照;
  • primitiveUnits 定义<filter>下面的过滤器原语或原语子域中的长度单位指定坐标系统,当 primitiveUnits=”userSpaceOnUse”(默认值,不设置默认此值),以当前用户坐标做参照,当primitiveUnits=”objectBoundingBox”,以当前<filter>对象边框盒子大小做参照;

实例

我们看看这个例子,默认用一个没有模糊度的高斯滤镜作填充实验;然后我们试着改变滤镜的覆盖区域,可以看到绿色边框是要应用滤镜区域范围;
两两比较例子就能知道区别,其中前两个通过是调整 <filter> 的应用范围,后两个是调整子元素 <feGaussianBlur> 的应用范围;
我们发现当 filterUnits=”objectBoundingBox” 时候 x=”-10%” y=”-10%” 默认都是 -10%,而且 width 和 height 都是 “120%”、才能把滤镜填满,这个是因为滤镜在运算过程要在边界补充像素,所以实际上要增大过滤的区域才刚好满足;

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1000" height="300" viewBox="0 0 1000 300">
    <defs>
        <filter id="defaultFilter" filterUnits="objectBoundingBox" x="-10%" y="-10%" width="60%" height="120%">
            <feGaussianBlur in="SourceGraphic" />
        </filter>
        <filter id="defaultFilter2" filterUnits="userSpaceOnUse" x="400" y="25" width="50" height="200">
            <feGaussianBlur in="SourceGraphic" />
        </filter>
        <filter id="defaultFilter3" primitiveUnits="userSpaceOnUse">
            <feGaussianBlur in="SourceGraphic" x="580" y="25" width="100" height="100" />
        </filter>
        <filter id="defaultFilter4" primitiveUnits="objectBoundingBox">
            <feGaussianBlur in="SourceGraphic"  x="0%" y="0%" width="100%" height="50%" />
        </filter>
    </defs>
    <!-- Apply filters-->
    <g fill="blue">
        <rect x="50" y="25" width="100" height="200" />
        <rect x="240" y="25" width="100" height="200" filter="url(#defaultFilter)"/>
        <rect x="400" y="25" width="100" height="200" filter="url(#defaultFilter2)"/>
        <rect x="580" y="25" width="100" height="200" filter="url(#defaultFilter3)"/>
        <rect x="760" y="25" width="100" height="200" filter="url(#defaultFilter4)"/>
    </g>
    <!-- Reference-->
    <g fill="none" stroke="green">
        <rect x="50" y="25" width="100" height="200" />
        <rect x="240" y="25" width="100" height="200" />
        <rect x="400" y="25" width="100" height="200"/>
        <rect x="580" y="25" width="100" height="200"/>
        <rect x="760" y="25" width="100" height="200"/>
    </g>
    <g font-size="8pt" fill="green">
        <text x="80" y="250">默认</text>
        <text x="200" y="250">filterUnits="objectBoundingBox"</text>
        <text x="380" y="250">filterUnits="userSpaceOnUse"</text>
        <text x="550" y="250">primitiveUnits="userSpaceOnUse"</text>
        <text x="740" y="250">primitiveUnits="objectBoundingBox"</text>
    </g>
</svg>

效果:

留下评论

电子邮件地址不会被公开。 必填项已用*标注