DeTools

各種好用好玩的工具都在這裡,還會放一些奇怪的實驗作品。

最新文章

教學

svg 的文字- text

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

教學

[Vue.js] vue leaflet 基本設置與地圖樣式

在 vue leaflet 裡有確實安裝 component 後,只要使用 l-map 就可以把地圖顯示出來了,一樣透過 props 把參數傳進去後就能生成地圖了。

教學

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

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

教學

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

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

教學

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

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

教學

[Vue.js] 使用 vue leaflet 來製作互動地圖- 基本安裝

之前我們提過用 leaflet.js 來取代 google maps製作互動地圖,這邊來用 vue 建立 web app,剛好有人弄好方便的工具 vue leaflet,測試一下還滿方便的,有興趣的可以用看看。

最新工具