SVG基本使用（一、基本概念、使用方法、繪製矩形/圓/橢圓/直線/折現/多邊形/）

一、SVG概念

• 1.什麼是SVG?
  SVG英文全稱爲Scalable Vector Graphics，意思爲可縮放的矢量圖

• 2.位圖和矢量圖
  在計算機中有兩種圖形, 一種是位圖, 一種是矢量圖

  • 2.1 位圖:
    傳統的 jpg / png / gif圖都是位圖
    位圖是一個個很小的顏色小方塊組合在一起的圖片。一個小方塊代表1px
  • 2.2 位圖的優點和缺點:
    • 優點: 色彩豐富逼真
    • 缺點: 放大後會失真, 體積大
  • 2.3 矢量圖
    矢量圖是用XML格式（HTML也是XML格式，是特殊的xml）定義, 通過各種「路徑」和「填充顏色」來描述渲染的的圖片
  • 2.4 矢量圖優點和缺點:
    • 優點: 放大後不會失真（因爲小方格不是固定死的）, 體積小
    • 缺點: 不易製作色彩變化太多的圖象

3.svg的寬高：

• 默認值：同canvas一樣，svg也有默認的寬高、；並且默認寬高同canvas一樣也是：300 * 150
• 修改寬高：同canvas不一樣。canvas只能在行內修改。而svg使用css和行內屬性都可以修改寬高。

二、SVG使用方式

1.SVG常見的四種使用方式

• 1.1、內嵌到HTML中（直接在HTML的body中繪製）

    <svg width="500" height="500">
        <circle cx="100" cy="100" r="50" fill="transparent" stroke="#000"></circle>
    </svg>

• 1.2、通過瀏覽器直接打開SVG文件（SVG保存爲單獨文件，通過瀏覽器打開）
  svg需要添加屬性xmlns（xml name space：命名空間），用於告訴瀏覽器，此文件不是普通xml文件，而是用來表示SVG圖形的。下文爲circle.svg文件內的代碼

    <svg width="500" height="500" **xmlns="http://www.w3.org/2000/svg"**>
         <circle cx="100" cy="100" r="50" fill="transparent" stroke="#000"></circle>
    </svg>

• 1.3、在HTML的img標籤中引用
  通過img標籤引用SVG文件
  <img src="circle.svg" alt="">
• 1.4、作爲CSS背景使用

    div{
        width: 500px;
        height: 500px;
        background: url("circle.svg");
    }
    <div></div>

三、SVG繪圖

1.繪製矩形：使用rect標籤

• 主要屬性：
  • x/y：繪圖位置；
  • width/height：矩形長寬；
  • fill：填充顏色、默認黑色
  • stroke：描邊的顏色。
  • stroke-width：描邊的寬度
  • rx/ry:圓角：以10爲半徑畫圓

<svg width="500" height="500">
    <rect x="100" y="100" width="150" height="100" fill="#fea" stroke="#aef" stroke-width="2" rx="10"></rect>
</svg>

2.繪製圓和橢圓

2.1、 繪製圓：

• 方法一：使用矩形繪製

	<svg width="500" height="500">
  	  <rect x="100" y="10" width="100" height="100" rx="50"></rect>
	</svg>

• 方法二：使用專門的標籤繪製
  cx/cy：圓繪製的位置，圓心位置
  r:圓的半徑

	<svg width="500" height="500">
	     <circle cx="150" cy="200" r="50"></circle>
	</svg>

2.2、繪製橢圓

• 方法一：使用矩形繪製

<svg width="500" height="500">
    <!--繪製橢圓-->
   <rect x="100" y="300" width="100" height="50" rx="50" ry="25"></rect>
</svg>

• 方法二：使用專門的標籤繪製
  cx/cy：橢圓繪製的位置，圓心的位置
  rx/ry:橢圓圓的半徑

	<svg width="500" height="500">
	   <ellipse cx="150" cy="400" rx="50" ry="25"></ellipse>
	</svg>

3.繪製直線、折線、多邊形

3.1、繪製直線

• x1/y1：起點
• x2/y2：終點
• stroke：線條顏色，必須有

<svg width="500" height="500">
    <line x1="100" y1="100" x2="200" y2="100" stroke="#abf"></line>
</svg>

3.2、繪製折線

• points：設置所有折線的點
• fill：是否填充。默認填充

<svg width="500" height="500">
    <polyline points="100 150 300 150 300 200" stroke="#abf" fill="none"></polyline>
</svg>

3.3、繪製多邊形

• 方法一：折線從起點回到終點，就是多邊形

<svg width="500" height="500">
    <polyline points="100 300 300 300 300 350 100 300" stroke="#abf" fill="none"></polyline>
</svg>

• 方法二：關閉路徑
  polygon和polyline差不多，只是會自動關閉路徑

<svg width="500" height="500">
    <polygon points="100 400 300 400 300 450" stroke="#abf" fill="none"></polygon>
</svg>