[翻譯svg教程]svg學習系列 開篇

目錄 [翻譯svg教程]svg學習系列 開篇

      【翻譯svg教程 】svg 的座標系統

       [翻譯svg教程]svg 中的g元素

       [翻譯svg教程]svg中矩形元素 rect

       [翻譯svg教程]svg中的circle元素

       [svg翻譯教程]橢圓（ellipse元素）和線（line元素）

       [svg 翻譯教程]Polyline（折線）polygon（多邊形）

       [翻譯svg教程]Path元素 svg中最神奇的元素！

網上svg的資料太少 買個書也買不到 碰巧遇到一個外國友人的svg學習些列，翻譯下

http://tutorials.jenkov.com/svg/index.html

svg 簡介

可縮放矢量圖形是基於可擴展標記語言（標準通用標記語言的子集），用於描述二維矢量圖形的一種圖形格式。它由萬維網聯盟制定，是一個開放標準。

今天的現代多數瀏覽器都支持SVG  ie9+ 火狐 chrome 等

svg 最大的用途就是繪圖 各種圖標 等 ，在網頁上直接繪圖

因爲svg本身的dom節點，所以可以和網頁上其他dom節點通信

這是些svg繪圖的截圖

例如一個svg矩形

代碼

<svg  xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink">
    <rect x="10" y="10" height="100" width="100"
          style="stroke:#ff0000; fill: #0000ff"/>
</svg>

網頁上的樣子

如何在網頁中顯示一個svg 呢

方法有很多

但我們常用的也就兩個

1 將svg作爲一個dom節點插入到dom中

例如

<div>
<svg>
    <circle cx="40" cy="40" r="24" style="stroke:#006600; fill:#00cc00"/>
    </svg>
</div>

這樣的好處是可以用jquery等各種js工具操作svg，事件什麼的也都可以

2圖片和背景圖片

圖片

<img src="/svg/circle-element-1.jsp">

  將svg的內容作爲圖片顯示

背景圖片

div {
    background-image: url('my-svg-image.svg');
    background-size : 100px 100px;
}

還有一中最近誕生的用戶就是將svg作爲web字體使用，就不舉例了，因爲我不熟悉。。。。。