svg的渐变元素用法

svg中的渐变元素有两种，分别是线性渐变<linearGradient>和径向渐变<radialGradient>。这两种渐变作为背景被填充时都需要用url的形式导入到具体元素中。

1、线性渐变<linearGradient>

主要属性有x1、y1、x2、y2，分别表示水平渐变起点、垂直渐变起点、水平渐变终点、垂直渐变终点，都是以左上角作为原点进行偏移，其值一般用百分比表示。渐变只发生在起点和终点范围内，在范围外则按原色处理。这几个属性实际上只是渐变起点和终点的第一级，内部元素<stop>中的offset属性会影响渐变起点和终点的第二级。这几个属性还能调整渐变的角度，具体表现为：

• 当x1、x2为任意值，y1=y2=0时，表现为水平渐变。
• 当y1、y2为任意值，x1=x2=0时，表现为垂直渐变。
• 对于其他情况，则表现为斜向渐变，且渐变向量(x，y) = 终止偏移量(x，y) - 起始偏移量(x，y)，与以左上角为原点的坐标系夹角为arctan(y/x)，正值斜向下。

这里渐变内部的<stop>元素，该元素是渐变必须的，且至少要两个才能画出渐变。其中两个重要属性offset和stop-color，分别表示渐变第二级的偏移点和停止颜色。渐变第二级的偏移点是建立在第一级的范围内的，相邻两个颜色的offet依次分别表示起始偏移点和终止偏移点。第一个偏移点的前侧和最后一个偏移点的后侧因为没有其他元素则不发生偏移。

以下是svg的水平线性渐变的一个案例：

    <svg width="320" height="320" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <!--关键定义-->
        <linearGradient id="grad" x1="10%" x2="85%" y1="0" y2="0">
          <stop offset="20%" stop-color="#35fe98"></stop>
          <stop offset="70%" stop-color="#ea73f4"></stop>
        </linearGradient>
      </defs>

      <rect x="40" y="40" width="200" height="200" fill="url(#grad)"></rect>

      <path d="M 40,36 l 0,-10 M 42,31 l 80,0 M 240,36 l 0,-10 M 238,31 l -80,0"
        stroke="#464646" 
      />