day03

一:SVG(可伸縮向量圖形)

​ 特點：

• 用於網路的向量圖形（高質量的被列印）
• 使用xml格式定義的圖形（可以使用文字編輯器來建立和修改）
• 放大或者極度縮小的情況下圖形不會失真
• SVG 影像中的文字是可選的，同時也是可搜尋的（很適合製作地圖）

二：相容性

​ IE8及以下的瀏覽器不支援,使用外掛（Adobe SVG）可以在IE8執行

三：svg和canvas的區別

• —svg是通過xml語言進行描述的

  —canvas是通過js指令碼語言進行繪製的

• —svg圖形可以進行動態的修改

  —canvas圖形一經繪製，不能改動，否則只有重新繪製

• —svg不依賴電腦的解析度

  —canvas依賴解析度

• —svg的每一個元素都可以使用dom事件進行處理，

  —canvas不支援事件處理

四：svg檔案在html的使用方式

• embed，iframe標籤

  —優點：允許指令碼使用

  —缺點：H4和XHTMl中不能使用（H5可以）

  <embed src="circle1.svg" type="image/svg+xml" /> 
  
  <iframe src="circle1.svg"></iframe> 
  

• object標籤

  —優點：H4，H5和XHTMl都可以使用

  —缺點：不允許指令碼使用

  <object data="circle1.svg" type="image/svg+xml"></object> 
  

• 使用a標籤進行連線

  <a href="circle1.svg">View SVG file</a> 
  

• 直接在html中使用

五：svg的使用

1·繪製圓

• circle標籤建立一個圓
• stroke：表示繪製邊框顏色
• stroke-width：表示邊框寬度

• fill：表示填充 顏色
  

• cx，cy表示圓中心的座標（行內）
• r：表示圓的半徑

    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500px" height="500px">
        <!--xmlns：是svg的名稱空間
			version表示：使用的svg的版本
			width,height表示：整個svg的繪製區域 （預設300*150）
			-->
        <circle cx="200" cy="200" r="100" stroke="blue" stroke-width="5" fill="yellow" />
     </svg> 

2· 繪製矩形

• rect標籤建立矩形

• width,height:定義矩形的高寬

• x: 定義矩形距離瀏覽器左側的距離（行內）

• y: 定義矩形距離瀏覽器上側的距離（行內）

• rx 和 ry 屬性可使矩形產生圓角。（行內）

     #square {
   	stroke: black; 
   	stroke-width: 4px;
   	fill: aqua;
   	fill-opacity:0.3;
}
    <svg xmlns="http://www.w3.org/2000/svg"
       version="1.1" 
       class="all">
   <!--opacity屬性定義整個圖形的透明度
       fill-opacity屬性定義填充透明度
	stroke-opacity 屬性定義輪廓透明度（合法的範圍是：0 - 1）-->
 <rect id="square" x="20px" y="20px" rx="30px" ry="50px"/>
  </svg>

3·繪製橢圓

• rx：定義水平半徑
• ry：定義垂直半徑

<svg style="width: 600px; height:600px">
        <ellipse class="tuo" cx="300" cy="80" rx="90" ry="50" />
    </svg>

4·繪製直線

• x1:開始的x座標
• x2：結束繪製的y座標
• y1:開始的y座標
• y2:結束的y座標

<svg>
        <line x1="50" y1="100" x2="200" y2="50"/>
    </svg>

5·繪製多邊形

• polygon 標籤是用來繪製多邊形的
• 多邊形是有直線構成的，封閉的圖形
• points：寫明每一個點之間的座標（x，y）

<svg>
        <polygon points="100,200,500,200,200,300,300,100,400,300" fill-rule=”evenodd“/>
    </svg>

• fill-rule：svg圖形的填充規則（判斷某一區域是否屬於內部【內部被填充】）

  —nonzero（從該點做任意方向的射線，路徑從左—>右穿過射線，加一；從右—>左穿過射線，減一；結果為0，該點在外部，反之，）

l-rule=”evenodd“/>

- fill-rule：svg圖形的填充規則（判斷某一區域是否屬於內部【內部被填充】）

  —nonzero（從該點做任意方向的射線，路徑從左—>右穿過射線，加一；從右—>左穿過射線，減一；結果為0，該點在外部，反之，）

  —evenodd（射線與路徑的相交點，奇數在內部，填充）