svg渐变、阴影，以及定位和地图

目录

一、svg渐变

1.svg线性渐变

2.svg径向渐变

3.文字渐变

二、阴影

三、定位 （经纬度）

 四、地图

---

一、svg渐变

svg的渐变也是有线性渐变和径向渐变，文字也可以设置渐变颜色。svg的渐变跟canvas画布渐变使用方法大同小异，但是x/y的值就不要用数字来写了，数字表达的不准确，在svg渐变中我们使用百分比来写。

1.svg线性渐变

在svg中线性渐变我们使用linearGradient这个标签来写，里面需要设置的属性有id、x1/y1、x2/y2

id值不用过多介绍，x1/y1代表起始坐标，x2/y2代表结束坐标。设置颜色则是需要使用stop标签，我们在需要使用渐变颜色的图形里使用fill="url(#id值)"来链接。

<svg>
    <!-- x y使用数值精度不准确，需要使用百分比 -->
    <!-- 线性渐变 -->
    <linearGradient id="linear" x1="0%" y1="0%" x2="0%" y2="100%">
        <!-- stop设置渐变颜色 -->
        <stop offset="0%" stop-color="red"></stop>
        <stop offset="50%" stop-color="yellow"></stop>
        <stop offset="100%" stop-color="green"></stop>
    </linearGradient>
    <rect x="0" y="0" width="200" height="100" fill="url(#linear)" stroke="green"></rect>
</svg>

2.svg径向渐变

使用方法跟上面的线性渐变差不多，只是属性多了一个r。里面的属性以及代表的意思为：

cx/cy：表示颜色渐变的中心点坐标   r：表示颜色渐变的范围  fx/fy：表示渐变颜色的交点坐标

<svg>
   <!-- 径向渐变 -->
   <!-- 
       cx/cy：表示颜色渐变的中心点坐标
       r：表示颜色渐变的范围
       fx/fy：表示渐变颜色的交点坐标
    -->
    <radialGradient id="radia" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">