图片边缘模糊

看如下效果：

可以使用svg的mask配合渐变色实现代码如下：

<svg style="background-color:#29cb5b" width="500" height="500" viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg" >
    <defs>
        <radialGradient id="radia_gra" cx="50%" cy="50%" r="100%">
            <stop offset="0%" stop-color="#ffffff" stop-opacity="1.0"></stop>
            <stop offset="30%" stop-color="#ffffff" stop-opacity="0.8"></stop>
            <stop offset="50%" stop-color="#ffffff" stop-opacity="0.0"></stop>
        </radialGradient>
        <mask id="vagueMask" >
            <ellipse cx="50%" cy="50%" rx="50%" ry="40%" fill="url(#radia_gra)"/>
        </mask>
    </defs>
    <image xlink:href="../img/fj.png" x="0" y="0" width="640" height="510" mask="url(#vagueMask)"/>
</svg>

当然使用css的内阴影也可以实现类似的效果：

svg的适用场景是什么呢？其实做过就会发现，用svg做显示的数字比较好控制，比较适合做一下动画效果。例如下面的动画：

svg还是比较合适的。具体的应用常见可以读者自己掌握。

<svg style="background-color:#29cb5b" width="500" height="500" viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg" >
    <defs>
        <radialGradient id="radia_gra" cx="50%" cy="50%" r="100%">
            <stop offset="0%" stop-color="#ffffff" stop-opacity="1.0"></stop>
            <stop offset="40%" stop-color="#ffffff" stop-opacity="0.8"></stop>
            <stop offset="50%" stop-color="#ffffff" stop-opacity="0.0"></stop>
        </radialGradient>
        <mask id="vagueMask" >
            <ellipse cx="120" cy="250" rx="100" ry="150" fill="url(#radia_gra)">
                <animate attributeName="cx" attributeType="XML" from="120" repeatCount="indefinite"  to="320" begin="0s" dur="5s" fill="freeze"></animate>
            </ellipse>
        </mask>
    </defs>
    <image xlink:href="../img/fj.png" x="0" y="0" width="640" height="510" mask="url(#vagueMask)"/>
</svg>

心电图

心电图效果如下：

代码地址：心电图源码
其实这个效果有两点瑕疵，光点应该在线上移动，是覆盖在线上面应该比线要粗的。并且路径图增加一个发光效果。同学们可以记住，我们在后面滤镜章节，会把这两方面加上。

阶梯背景

这是一个比较常见的例子，大家可以举一反三，先看效果：

这种图元不是在x和y方向的重复是css是不太好实现的。我们可以使用svg的pattern嵌套实现，实现思路是：
1，先实现图元，将图元作为一个pattern元素
2，找到重复的图元单元，作为pattern
可以查看源码：阶梯背景svg

科技球

在大屏展示中可以常见这种数据展示效果：

这种按照线条颜色渐变是css不好实现的。对于不规则线条按照线条路径渐变，svg也无能为力，如果真要实现的话，需要用多个线条路径，多个渐变色叠加到一起，才能实现。我们可以用svg实现下面的科技球效果：

这个效果做的并不好，仔细观察主要欠缺在两方面，发光效果和光照效果。他们的球体都是会发光的，并且他们球面上是光照效果而不是我们用的渐变色。我们下面会开讲svg滤镜的课程，会通过这个例子把发光和光照加进来。源码地址：科技球效果
接下来我们一起学习svg的滤镜。下节再见。

svg剪切，蒙层的应用指南

图片边缘模糊

心电图

阶梯背景

科技球