標籤: SVG 頁1

教學

svg 的文字- text

要在 svg 裡繪製文字需要使用 text 的標籤,這邊可以替文字設定外框及填滿顏色,是跟一般網頁文字比較不一樣的地方。

教學

SVG 的群組- g 與定義圖形- defs

在 svg 如果有圖形要重複使用的話我們可以使用 use,可是這個範例用起來需要先把每個圖排好後再去複製,要重複用的話就需要重新調整相對位置,如果要更有彈性且方便的應用的話,我們可以使用 defs 這個標籤把要重複使用的定義起來,這樣原始圖片就不會出現在 svg,接下來我們要用的時候再去呼叫就好了。

教學

在 SVG 使用已經繪製好的圖形- use 標籤

在 SVG 裡可以使用 use 這個標籤直接把已繪製好的圖形複製過去,並在修改樣式,使用方式為利用 href 去指定要使用的圖形 id,就可以將圖形複製過來。

教學

在 svg 設定漸層填色- linearGradient 與 radialGradient

在 svg 要使用漸層,需要使用 linearGradient 這個標籤,然後再使用 stop 去設定每個點的間層顏色就好,若使用 defs 可以設定完再利用 fill 的 url 去指定 id 即可。

教學

在 SVG 內使用 html- forginObject 標籤

在 SVG 裡基本上要使用其規定的標籤才能做出文字或圖形,那如果已經習慣 html 的標籤想要在 svg 內使用的話就會很不習慣,比如在 svg.裡要置入圖片要使用 image ,而 html 則是使用 img 的標籤,還好 svg 有提供一個 forginObject 的標籤,只要使用後就能在 svg 內使用 html 了。

教學

SVG 的 Path(1)- 基本直線

在 SVG 裡我們使用 path 來繪製線條,因為 path 很複雜,所以只要搞懂 path 應該就能理解大多數 svg 線條的方式了。

教學

CSS 的穿透屬性- pointer-events

pointer-events CSS 屬性指定在什麼情况下 (如果有) 某個特定的圖形元素可以成為滑鼠事件。

好網站

loading.io- 幫你快速生成向量不失真的 svg loading 動畫

做網站的時候常常會需要用到讀取動畫,最古老都是使用 gif,後來有一陣子我有使用過 CSS3 的,但近年因為發現 svg 很強大,所以就都改用 svg 的動畫來當讀取的 icon 了,而 loading.io 這個網站就是準備了很多現成的讀取動畫讓我們可以直接下載回去用的方便網站。

教學

使用 svg 繪製長條圖

用 svg 搭配 jquery 繪製長條圖。

教學

SVG 繪製線條

利用 svg 的 line 與 polyline 繪製線條。

教學

SVG 基本形狀- 矩形、圓形、橢圓形與多邊形

用 SVG 來簡單繪製矩形、橢圓形、圓形及多邊形。

教學

SVG 前言

SVG 全名為 Scalable Vector Graphics (可縮放向量圖形),是一種基於 XML 的應用於描述二維向量圖形的圖形格式。SVG 是由 W3C 制定的開放標準。