SVG阴影、滤镜、线性渐变、定位

1.SVG阴影

       1.1<defs>和<filter>

                 所有Internet SVG 滤镜都在<defs>元素中定义。

                        <defs>元素是定义的缩写，包含特殊元素（例如滤镜)的定义。

                        <filter>元素用于定义SVG 滤镜。

                        <filter>元素具有必需的id属性，用于标识滤镜。图形然后指向要使用的滤镜。

        1.2<feOffset>

                        <feoffset>元素用于创建阴影效果;想法是拍摄SVG图形(图像或元素）并将其在xy平面中移动一点，然后将原始图像混合在偏移图像的顶部（使用<feBlend>)。

                偏移一个长方形示例代码：

<svg>
        <!-- 定义滤镜 defs是一个定义标签 -->
        <defs>
            <!-- 定义一个过滤器filter -->
            <filter id="f1" width="200%" height="200%">
                <!-- 使用偏移滤镜 -->
                <feOffset in="SourceGraphic" result="offset1" dx="20" dy="20"></feOffset>
                <!-- 使用混合滤镜，主要是将原始标签显示出来 -->
                <feBlend in="SourceGraphic" in2="offset" mode="normal"></feBlend>
            </filter>
        </defs>
        <rect x="0" y="0" width="200" height="100" fill="red" stroke="green" filter="url(#f1)"></rect>
</svg>

     效果图 ：

            1.3 feColorMatrix

                                <fecolorMatrix>过滤器是用来转换翻移的图像使之更接近黑色的颜色，'0.2'矩阵的三个值都获叹乘以红色,绿色和蓝色通道。降低其值带来的颜色至黑色(黑色为0)

                        偏移+模糊示例代码：阴影加上一层颜色

<svg>
        <!-- 定义滤镜 defs是一个定义标签 -->
        <defs>
            <!-- 定义一个过滤器filter -->
            <filter id="f1" width="200%" height="200%">
                <!-- 使用偏移滤镜 -->
                <feOffset in="SourceGraphic" result="offset1" dx="20" dy="20"></feOffset>
                <!-- 用来转换偏移的图像使之更接近黑色的颜色feColorMatrix 通过values属性来控制阴影颜色 -->
                <feColorMatrix in="offset1" result="colorMatrix" type="matrix" values="0.2 0 0 0 0 0 1 0 0 0 0 0 1 1 0 0 0 0 1 0"></feColorMatrix>
                <!-- 模糊 stdDeviation:设置模糊度-->
                <feGaussianBlur result="blur" in="colorMatrix" stdDeviation="10"></feGaussianBlur>
                <!-- 使用混合滤镜，主要是将原始标签显示出来 -->
                <feBlend in="SourceGraphic" in2="offset" mode="normal"></feBlend>
            </filter>
        </defs>
        <rect x="0" y="0" width="200" height="100" fill="red" stroke="green" filter="url(#f1)"></rect>
</svg>

效果图：

2.SVG滤镜包括

                feBlend：与图像相结合的滤镜                 feColorMatrix：用于彩色滤光片转换

                feComponentTransfer                                feComposite

                feConvolveMatrix                                        feDiffuseLighting

                feDisplacementMap                                    feFlood

                feGaussianBlur：模糊滤镜                        feImage

                feMerge：多滤镜叠加滤镜                        feMorphology

                feOffset：过滤阴影                                     feSpecularLighting

                feTile                                                             feTurbulence

                feDistantLight：用于照明过滤                  fePointLight：用于照明过滤

                FeSpotLight：用于照明过滤

        2.1滤镜的属性

         2.2 feBlend滤镜的模式

                        normal — 正常                        multiply — 正片叠底

                        screen — 滤色                        darken — 变暗

                        lighten— 变亮

3.线性渐变<linearGradient >

                <linearGradient> 元素用于定义线性渐变。

                <linearGradient>元素必须嵌套在<defs>标记内;<defs>标签是定义的缩写，包含特殊元素（例如渐变)的定义。

                 线性渐变可以定义为水平,垂直或角度渐变:

                        （1）当y1和y2相等且x1和x2不同时,将创建水平渐变

                        （2）当x1和x2相等且y1和y2不同时,将创建垂直渐变

                        （3）当x1和x2不同且y1和y2不同时,将创建角度渐变

        水平渐变示例代码：

<svg>
        <defs>
            <linearGradient id="linear" x1="0%" y1="0%" x2="100%" y2="0%">
                <!-- 设置渐变色 使用stop标签 -->
                <stop offset="20%" stop-color="red"></stop>
                <stop offset="100%" stop-color="blue"></stop>
            </linearGradient>
        </defs>
        <rect x="0" y="0" width="200" height="100" fill="url(#linear)" stroke="green">            
        </rect>
</svg>

3.定位

                HTML5 Geolocation API用于获得用户的地理位置。

        定位示例代码：

<p id="location">用来显示定位</p>
    <input type="button" value="定位" onclick="showLocation()">
    <script type="text/javascript">
        var x=document.getElementById("location");
        //定义一个函数：用来获取用户的定位信息
        function showLocation(){
            //判断是否获取定位
            if(navigator.geolocation){
                //getCurrentPosition()中需要传入一个回调函数
                navigator.geolocation.getCurrentPosition(location_1,showError);
            }else{
                x.innerHTML="无法获取当前位置";
            }
        }
        function location_1(position){
            //显示获取到的用户定位中的纬度和经度
            x.innerHTML="纬度："+position.coords.latitude+"纬度："+position.coords.longitude;
        }

        function showError(error){
            switch (error.code) {
                case error.PERMISSION_DENIED:
                    x.innerHTML="用户不允许地理定位";
                    break;
                case error.POSITION_UNAVAILABLE:
                    x.innerHTML="无法获取当前位置";
                    break;
                case error.TIMEOUT:
                    x.innerHTML="操作超时";
                    break;
            }
        }
</script>