SVG滤镜初识-1-高斯与动感模糊

[OndayX]

SVG中支持的滤镜有很多，目前先拿sketch中自带的四种滤镜做演示。
要注意的是必须在 <defs>标签中定义 SVG 滤镜
<filter>标签用来定义 SVG 滤镜。<filter>标签使用必需的 id 属性来定义向图形应用哪个滤镜。
<filter>标签必须嵌套在 <defs>标签内。<defs>标签是 definitions 的缩写，它允许对诸如滤镜等特殊元素进行定义。

完整的SVG文件内容如下：

<?xml version="1.0" encoding="UTF-8"?>
<svg width="661px" height="604px" viewBox="0 0 661 604" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 59.1 (86144) - https://sketch.com -->
    <title>滤镜</title>
    <desc>Created with Sketch.</desc>
    <defs><!-- 定义部分 -->
        <linearGradient x1="94.8753463%" y1="0%" x2="5.12465374%" y2="100%" id="linearGradient-1"><!-- 这部分是公共背景的渐变设置 -->
            <stop stop-color="#32C5FF" offset="0%"></stop>
            <stop stop-color="#B620E0" offset="51.2583893%"></stop>
            <stop stop-color="#F7B500" offset="100%"></stop>
        </linearGradient>
        <filter x="-12.6%" y="-14.6%" width="125.1%" height="129.3%" filterUnits="objectBoundingBox" id="filter-2"><!-- 这部分为高斯模糊 -->
            <feGaussianBlur stdDeviation="10" in="SourceGraphic"></feGaussianBlur>
        </filter>
        <filter x="-12.6%" y="-14.6%" width="125.1%" height="129.3%" filterUnits="objectBoundingBox" id="filter-3"><!-- 这部分为动感模糊 -->
            <feGaussianBlur stdDeviation="10 0" in="SourceGraphic"></feGaussianBlur>
        </filter>
    </defs>
    <g id="r" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <rect id="矩形" fill="url(#linearGradient-1)" x="102" y="71" width="450" height="475"></rect>
        <rect id="高斯模糊" stroke="#979797" fill-opacity="0.7" fill="#D8D8D8" filter="url(#filter-2)" x="27.5" y="25.5" width="238" height="204"></rect>
        <rect id="缩放模糊" stroke="#979797" fill-opacity="0.7" fill="#D8D8D8" x="27.5" y="376.5" width="238" height="204"></rect>
        <rect id="动感模糊" stroke="#979797" fill-opacity="0.3" fill="#D8D8D8" filter="url(#filter-3)" x="394.5" y="25.5" width="238" height="204"></rect>
        <rect id="背景模糊" stroke="#979797" fill-opacity="0.3" fill="#D8D8D8" x="394.5" y="376.5" width="238" height="204"></rect>
    </g>
</svg>

需要注意的是，sketch中的缩放模糊和背景模糊目前实测是无法被SVG直接解析的，也就是说，以上从sketch直接导出的代码也是无法显示缩放和背景模糊的效果。