svg圖像解析的使用方法

作者：佚名   時間：2014-06-25   分享到：

在解釋如何在頁面中使用svg格式之前,我們需要介紹這個圖像格式的后臺編碼.可以看出,svg實際上一個對其所創立的圖像進行標記的xml文件,這意味著svg可以在文本編輯器中被查看或手動修改,而這類操作對于位圖文件來說基本上是不可能實現的.
  在任意編輯器中打開一個svg文件,或在瀏覽器窗口中查看其源代碼,然后檢查svg文件的內容.盡管不同文件的實際標記有很大差異,但用戶仍然可以查看許多常用元素.首先,所有svg文件都以xml聲明開頭,這個聲明含有用戶所使用xml的版本號,編碼文本的類函數以及stadalone屬性,這個屬性將文件設置為引用其他外部文件或與其他文件無關:
  <?xml vesion="1.0" encoding="utf-8" standalone="no"?>
  接下來介紹svg元素以及一系列包含語法信息的命名空間,下面的救命來自一個隨機的svg文件.在這個例可以看到,這個文件使用了都柏林核心元數據術語,并由知識共享組織授權使用.這個svg文件使用rdf,svg和xlink模式來描述其內容:
  <svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://web.resource.org/cc/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  svg元素的最簡單形式僅需兩個屬性,即鏈接到svg命名空間的屬性以及用戶所使用svg版本的屬性:
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  svg元素的所有子元素都包含用于創建圖像的信息.大多數這些信息都包含在一系列基礎數學圖形的元素中,這些圖形被 用于繪制circle,rect,ellipse,polygon和line.上述每種圖形元素都有一系列描述圖形位置,尺寸和顏色信息的屬性,例如,下面的代碼展示了如何繪制一個圓,這個圓中心到網格左端的距離為50px,到網格上端的距離為75px,其半徑為25px,粗體加黑寬度為2px,并且其背景顏色為銀色.