SVG意為可伸縮矢量圖形

# 基本樣式應(yīng)用
<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關(guān)閉路徑
  <path d="M50 50 L100 150 L150 150 Z" />

  # 創(chuàng)建折線 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軸線條結(jié)束 y2 Y軸線條結(jié)束
  <line x1="0" y1="0" x2="300" y2="300" style="stroke:rgb(99,99,99);stroke-width:2"/>

  # 定義橢圓 cx圓X坐標(biāo) cy圓Y坐標(biāo) 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坐標(biāo) cy圓Y坐標(biāo) r半徑 fill填充色 stroke邊框色 stroke-width邊框?qū)?  <circle cx='150' cy='150' r='70' fill="red" stroke="black" stroke-width="2"/>

  # 定義矩形 寬|| 高 || 填充色 || 邊框?qū)?|| 線條色
  <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 屬性可定義漸變的開始和結(jié)束位置
 3. 漸變顏色由 stop標(biāo)簽來設(shè)定
 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 內(nèi)層圓
 2. stop標(biāo)簽用來設(shè)置顏色 offset屬性定義漸變的開始和結(jié)束
<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標(biāo)簽必須包裹fliter標(biāo)簽
 2. fliter標(biāo)簽屬性id用來指定那個圖形應(yīng)用該路徑
 3. feGaussianBlur標(biāo)簽用來定義濾鏡效果
 4. stdDeviation定義模糊程度
 5. in="SourceGraphic"由整個圖像創(chuàng)建
 6. 給應(yīng)用圖像使用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>