SVG速記

1. 在HTML中加載SVG的方法

4. 直接在HTML中嵌入
5. 鏈接到SVG文件

2. SVG Shapes與主要參數

2.1 矩形

• x
• y
• width
• height
• rx
• ry

2.2 圓形

• cx
• cy
• r

2.3 橢圓

• cx
• cy
• rx
• ry

2.4 直線

• x1
• y1
• x2
• y2

2.5 多邊形

• points

points="100,10 40,180 190,60 10,60 160,180"

2.6 曲線

• points

points="20,20 40,25 60,40 80,120 120,140 200,180"

2.7 路徑

• M = moveto
• L = lineto
• H = horizontal lineto
• V = vertical lineto
• C = curveto
• S = smooth curveto
• Q = quadratic Bézier curve
• T = smooth quadratic Bézier curveto
• A = elliptical Arc
• Z = closepath

 <path d="M150 0 L75 200 L225 200 Z" />

2.8 文本

• x
• y

3. SVG Stroke 屬性

3.1 stroke

定義輪廓的顏色

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <g fill="none">
    <path stroke="red" d="M5 20 l215 0" />
  </g>
</svg>

3.2 stroke-width

定義輪廓的寬度

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <g fill="none" stroke="black">
    <path stroke-width="2" d="M5 20 l215 0" />
  </g>
</svg>

3.3 stroke-linecap

strokelinecap屬性定義不同類型的開放路徑的終結

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <g fill="none" stroke="black" stroke-width="6">
    <path stroke-linecap="butt" d="M5 20 l215 0" />
    <path stroke-linecap="round" d="M5 40 l215 0" />
    <path stroke-linecap="square" d="M5 60 l215 0" />
  </g>
</svg>

3.4 stroke-dasharray

strokedasharray屬性用於創建虛線。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <g fill="none" stroke="black" stroke-width="4">
    <path stroke-dasharray="5,5" d="M5 20 l215 0" />
    <path stroke-dasharray="10,10" d="M5 40 l215 0" />
    <path stroke-dasharray="20,10,5,5,5,10" d="M5 60 l215 0" />
  </g>
</svg>

4. SVG 濾鏡

SVG可用的濾鏡是：

• feBlend - 與圖像相結合的濾鏡
• feColorMatrix - 用於彩色濾光片轉換
• feComponentTransfer
• feComposite
• feConvolveMatrix
• feDiffuseLighting
• feDisplacementMap
• feFlood
• feGaussianBlur
• feImage
• feMerge
• feMorphology
• feOffset - 過濾陰影
• feSpecularLighting
• feTile
• feTurbulence
• feDistantLight - 用於照明過濾
• fePointLight - 用於照明過濾
• feSpotLight - 用於照明過濾

5. SVG 漸變

漸變是一種從一種顏色到另一種顏色的平滑過渡。可以把多個顏色的過渡應用到同一個元素上。

SVG漸變主要有兩種類型：

• Linear
• Radial

5.1 SVG 線性漸變-linearGradient

1. 位置參數，表示漸變開始和結束的位置

• x1
• x2
• y1
• y2

2. 顏色標籤，表示該位置的顏色，中間的顏色採用漸變的方式

• offset(實際百分比等於offset*x2/y2)
• style
• • stop-color
• • stop-opacity

<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />

5.2 SVG 放射性漸變-radialGradient

• cx
• cy
• r
• fx
• fy