2. svg填充和边框

在基础图形部分已经有在使用填充和边框属性，使用的是css的style方式插入到元素中，这里使用定义对象的属性

1.fill

• fill: 填充颜色
• fill-opacity: 透明度

     <rect x="10" y="10" width="100" height="100" fill="purple" fill-opacity="0.5"/>

fill

2.stroke

• stroke: 描边颜色
• stroke-width: 描边宽度
• stroke-linecap: 描边终点的形状
  butt： 直边结束线段
  square： 直边结束线段，稍微超出实际路径的范围，超出的大小由stroke-width控制
  round： 圆角，圆角的半径也是由stroke-width控制的

• stroke-linejoin： 控制两条描边线段之间，用什么方式连接

  
  stroke-linejoin
• stroke-dasharray: 虚线类型应用在描边
• stroke-dashoffset: 定义虚线开始的位置

3.渐变

必须给渐变内容指定一个id属性，否则文档内的其他元素就不能引用它。为了让渐变能被重复使用，渐变内容需要定义在<defs>标签内部，而不是定义在形状上面

1. 线性渐变
   要插入一个线性渐变，你需要在SVG文件的defs元素内部，创建一个<linearGradient> 节点

     <defs>
       <linearGradient id="linearGradient1">
        <stop stop-color="red" offset="0%"/>
        <stop stop-color="blue" stop-opacity="0.6" offset="50%"/>
        <stop stop-color="green" offset="100%"/>
       </linearGradient>
       <linearGradient id="linearGradient2" x1="0" x2="0" y1="0" y2="1">
        <stop offset="0%" stop-color="red"/>
        <stop offset="50%" stop-color="black" stop-opacity="0"/>
        <stop offset="100%" stop-color="blue"/>
      </linearGradient>
      <linearGradient id="linearGradient3" x1="0" x2="0" y1="0" y2="1" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#linearGradient1" />
     </defs>
     <rect x="10" y="10" width="100" height="100" fill="url(#linearGradient1)" />
     <rect x="120" y="10" width="100" height="100" fill="url(#linearGradient2)" />
     <rect x="230" y="10" width="100" height="100" fill="url(#linearGradient3)" />

linearGradient

2. 径向渐变

     <defs>
       <radialGradient id="RadialGradient1">
        <stop offset="0%" stop-color="red"/>
        <stop offset="100%" stop-color="blue"/>
       </radialGradient>
       <radialGradient id="RadialGradient2" cx="0.25" cy="0.25" r="0.25">
        <stop offset="0%" stop-color="red"/>
        <stop offset="100%" stop-color="blue"/>
       </radialGradient>
       <!-- fx和fy 焦点--渐变的中心-->
       <radialGradient id="RadialGradient3"
       cx="0.5" cy="0.5" r="0.5" fx="0.25" fy="0.25">
        <stop offset="0%" stop-color="red"/>
        <stop offset="100%" stop-color="blue"/>
      </radialGradient>
     </defs>
     <rect x="10" y="10" width="100" height="100" fill="url(#RadialGradient1)" />
     <rect x="120" y="10" width="100" height="100" fill="url(#RadialGradient2)" />
     <rect x="230" y="10" width="100" height="100" fill="url(#RadialGradient3)" />

radialGradient