前言

此筆記為本人在菜鳥程式設計學完SVG之後，對所學知識進行的整理。

此筆記用於記錄本人在學習中還有不懂以及值得注意的地方。以方便日後的工作與學習。

筆記中有些個人理解後整理的筆記，可能有所偏差，也懇請讀者幫忙指出，謝謝。

注意

此筆記相對精煉，請讀者結合平臺學習更佳

學習平臺：SVG 教程-菜鳥程式設計

什麼是SVG？

• Scalable Vector Graphics（可伸縮向量圖形）
• 用於網路，基於向量的圖形
• 用 XML 格式定義圖形
• 不失幀
• 使用 .svg（全部小寫）作為SVG檔案的副檔名。

格式：

<svg version="" baseProfile="" width="" height="" xmlns="">
    <!--svg內容-->
</svg>
 

<svg>：根元素

width和height：SVG文件的寬度和高度

version：使用的 SVG 版本

xmlns：SVG 名稱空間

HTML引入SVG

方法比較

具體用法

方法一：embed標籤引入

 <embed src=".svg檔名帶字尾" type="image/svg+xml" /> 

方法二：object標籤引入

 <object data=".svg檔名帶字尾" type="image/svg+xml"></object> 

方法三：iframe標籤引入

 <iframe src=".svg檔名帶字尾"></iframe> 

方法四：直接在HTML嵌入SVG程式碼

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
   <!--SVG內容-->
</svg>

方法五：a標籤連結到SVG檔案

 <a href=".svg檔名帶字尾">檢視 SVG 檔案</a> 
 

SVG內容速覽

SVG標籤通用屬性

SVG常用元素

rect（矩形）

格式：

<rect x="可選" y="可選" rx="可選" ry="可選" width="" height="" style=""/>

特殊屬性：

x：矩形的左側位置（矩形的左邊框與瀏覽器視窗左邊界的距離）

y：矩形的頂端位置（矩形的上邊框與瀏覽器視窗上邊界的距離）

rx和ry：可使矩形產生圓角。

額外拓展：

CSS屬性：

• fill-opacity：填充顏色透明度（合法的範圍是：0 - 1）
• stroke-opacity：輪廓顏色的透明度（合法的範圍是：0 - 1）
• opacity：元素的透明值 (範圍: 0 到 1)。

circle（圓）

格式：

<circle cx="" cy="" r="" fill="" />

特殊屬性：

cx：圓心的x座標

cy：圓心的y座標

r：半徑

注意：如果忽略cx和cy，圓心預設被設定為（0，0）

ellipse（橢圓)

格式：

<ellipse cx="" cy="" rx="" ry="" style=""/>

特殊屬性：

cx：橢圓中心的x座標

cy：橢圓中心的y座標

rx：水平半徑

ry：垂直半徑

line（直線）

格式：

<line x1="" y1="" x2="" y2="" style=""/>

特殊屬性：

x1：x 軸定義線條的開始

y1： y 軸定義線條的開始

x2：x 軸定義線條的結束

y2： y 軸定義線條的結束

polygon（多邊形）

格式：

<polygon points="x1,y1 x2,y2 ... xn,yn" style=""/>

特殊屬性：

points：定義多邊形每個角的 x 和 y 座標，用空格隔開

額外拓展：

CSS屬性：

• fill-rule(圖形填充規則)
• 判斷一點在內部還是外部
  • 1、從該點作任意方向的一條射線，然後檢測射線與圖形路徑的交點情況。
  • 2、

屬性值	描述	判斷規則
nonzero（預設值）	非零	從0開始計數，路徑從左向右穿過射線則計數加1，從右向左穿過射線則計數減1。得出計數結果後，如果結果是0，則認為點在圖形外部，否則認為在內部。
evenodd	奇偶	交點數量。如果結果是奇數則認為點在內部，是偶數則認為點在外部
inherit

polyline（多段線）

格式：

<polyline points="x1,y1 x2,y2 ... xn,yn" style=""/>

points：定義多段線每個點的 x 和 y 座標，用空格隔開

path（路徑）

格式：

<path d="M開始資料 路徑資料1 路徑資料2 ... Z" />

路徑資料=路徑資料命令+點座標(座標x和y用空格隔開)

路徑資料命令：

text（文字）

格式：

<text x="" y="" fill="" transform="">文字內容</text>

特殊屬性：

x和y：與矩形的屬性一樣就不過多贅述了

transform：與CSS3transform屬性一樣【瞭解更多】

關於text的更多用法

Stroke 屬性

SVG濾鏡元素

• 濾鏡=特殊效果
• defs元素：
  • 所有網際網路的SVG濾鏡都用該元素定義
  • 定義短並含有特殊元素（如濾鏡）定義。
• filter標籤：
  • 定義SVG濾鏡
  • 使用id屬性來定義向圖形應用哪個濾鏡

格式：

<svg>
    <defs>
        <filter id="">
            <!--濾鏡內容-->
        </filter>
    </defs>
</svg>

注意：上述程式碼只是為了讓讀者瞭解大致結構，有些元素省略

濾鏡內容

feGaussianBlur（模糊效果）

格式：

<

屬性：

in：

stdDeviation：模糊量

filter="url(#id)"：將常用元素的濾鏡屬性與設定的濾鏡效果實現（前提濾鏡要能實現，而且有單獨用id或class標識）

示例:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <filter id="f1" x="0" y="0">
      <feGaussianBlur in="SourceGraphic" stdDeviation="15" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3"
  fill="yellow" filter="url(#f1)" />
</svg> 

效果：

feOffset（陰影）

格式：

<feOffset result="offOut" in="" dx="" dy=""/>

實現思路：注意：以下程式碼只是步驟中的關鍵程式碼，具體實現看原始碼

• 步驟一：初步平移

  <feBlend in="SourceGraphic" in2="offOut" mode="normal" />
  

• 步驟二：模糊偏移影象

  <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
  

• 步驟三：修改模糊偏移影象顏色

  <feOffset result="offOut" in="SourceAlpha" dx="20" dy="20" />
  

  修改了in屬性的值

• 步驟四：陰影上在塗上一層顏色

  <feColorMatrix result="matrixOut" in="offOut" type="matrix" values="0.2 0 0 0 0 0 0.2 0 0 0 0 0 0.2 0 0 0 0 0 1 0" />
  

  對這個句關鍵程式碼不瞭解的可以看原文底下的評論區有做詳細的解釋

~Gradient（漸變）

• 漸變：一種從一種顏色到另一種顏色的平滑過渡。

linearGradient（線性漸變）

格式：

<linearGradient id="" x1="" y1="" x2="" y2="" >
	<stop offset="" style="stop-color:rgb( , , );"/>
    <stop offset="" style="stop-color:rgb( , , );"/>
</linearGradient>

特殊屬性：

x1和y1：開始位置

x2和y2：結束位置

stop標籤：定義漸變顏色

radialGradient （放射性漸變）

格式：

<radialGradient id="" cx="" cy="" r="" fx="" fy="">
    <stop offset="" style="" />
    <stop offset="" style=""/>
</radialGradient>

特殊屬性：

cx和cy：定義最外層圓

fx和fy：定義最內層圓

額外學習

更多SVG示例

SVG參考手冊

SVG線上編輯器

結語

感謝菜鳥程式設計提供學習的平臺

感謝各位讀者能看到最後