SVG

SVG意为可伸缩矢量图形

# 基本样式应用
<svg version="1.1" baseProfile="full" width="500" height="500" style="border:1px solid red" xmlns="http://www.w3.org/2000/svg">
  # 定义路径 M路径开始 L路径到达 Z关闭路径
  <path d="M50 50 L100 150 L150 150 Z" />

  # 创建折线 points="x1,y1 x2,y2 x3,y3...."
  <polyline points="0,0 10,20 30,50 60,80 90,120 90,160" style="fill:white;stroke:red;stroke-width:2"/>

  # 定义不少于三个角的多边形 points="x1,y1 x2,x2 x3,y3..."
  <polygon points="0,30 40,30 60,90" style="fill:#cccccc; stroke:#000000;stroke-width:1"/>

  # 定义线条 x1 X轴线条开始 y1 Y轴线条开始 x2 X轴线条结束 y2 Y轴线条结束
  <line x1="0" y1="0" x2="300" y2="300" style="stroke:rgb(99,99,99);stroke-width:2"/>

  # 定义椭圆 cx圆X坐标 cy圆Y坐标 rx水平半径 ry垂直半径
  <ellipse cx="300" cy="300" rx="155" ry="55" style="fill:rgb(200,100,50);
stroke:rgb(0,0,100);stroke-width:2"/>

  # 定义圆 cx圆X坐标 cy圆Y坐标 r半径 fill填充色 stroke边框色 stroke-width边框宽
  <circle cx='150' cy='150' r='70' fill="red" stroke="black" stroke-width="2"/>

  # 定义矩形 宽|| 高 || 填充色 || 边框宽 || 线条色
  <rect style="width:150px;height:150px;fill:rgba(0,0,0,0.5);stroke-width:1;stroke:rgba(122,122,122,0.6);opacity:0.2"></rect>
</svg>

# 线性渐变
 1. linearGradient定义线性渐变
 2. x1、x2、y1、y2 属性可定义渐变的开始和结束位置
 3. 渐变颜色由 stop标签来设定
 4. x1 x2 y1 y2值不同渐变也就不同
<svg version="1.1" baseProfile="full" width="500" height="500" style="border:1px solid red" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="orange_red" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:rgb(255,255,0); stop-opacity:1"/>
      <stop offset="100%" style="stop-color:rgb(255,0,0); stop-opacity:1"/>
    </linearGradient>
  </defs>
  <ellipse cx="200" cy="190" rx="85" ry="55" style="fill:url(#orange_red)"/>
</svg>

# 放射渐变
 1. radialGradient定义放射渐变 cx cy r 外层圆 || fx fy 内层圆
 2. stop标签用来设置颜色 offset属性定义渐变的开始和结束
<svg version="1.1" baseProfile="full" width="500" height="500" style="border:1px solid red" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <radialGradient id="grey_blue" cx="50%" cy="50%" r="50%" fx="0%" fy="50%">
      <stop offset="0%" style="stop-color:rgb(200,200,200); stop-opacity:0"/>
      <stop offset="100%" style="stop-color:rgb(0,0,255); stop-opacity:1"/>
    </radialGradient>
  </defs>
  <ellipse cx="230" cy="200" rx="110" ry="100" style="fill:url(#grey_blue)"/>
</svg>

#  定义滤镜
 1. defs标签必须包裹fliter标签
 2. fliter标签属性id用来指定那个图形应用该路径
 3. feGaussianBlur标签用来定义滤镜效果
 4. stdDeviation定义模糊程度
 5. in="SourceGraphic"由整个图像创建
 6. 给应用图像使用filter:url(#指定的id)属性
<svg version="1.1" baseProfile="full" width="500" height="500" style="border:1px solid red" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="Gaussian_Blur">
      <feGaussianBlur in="SourceGraphic" stdDeviation="3" />
    </filter>
  </defs>
  <rect width="200" height="200" style="fill:red;stroke: blue;filter:url(#orange_red)" stroke-width="5"></rect>
</svg>