基本上是這系列最後一篇，除非之後接觸到跟SVG相關的有趣應用! (≧▽≦) 我在大學畢業的最後一學期，選修了網頁資料視覺化的課程，課程主要使用D3.js這個JavaScript擴充函式庫做資料視覺化的工作。那D3.js是什麼? 跟SVG有什麼關係呢? D3.js D3指的是Data-Driven Document，以資料驅動編輯網頁的DOM，更白話的說法就是可以根據資料的筆數，動態地生成相同數
SVG 自學微筆記完! (๑´ㅂ`๑) 學習資源: W3Schools、其他網路資料 說到SVG中最複雜的東西，路徑(Path)絕對是一個大魔王，它有太多的commands可以用來定義路徑。透過Path雖然可以繪製效果不錯的SVG圖形，但是要自己定義一個個坐標點，再去把它們完美的串連在一起，實在是件非常困難的事。 W3Schools的SVG Path教學在最後提到，因為Path太複雜的關係
不定更新、即將迎來結尾 (๑´ㅂ`๑) 學習資源: W3Schools、其他網路資料 漸層(Gradients)是W3Schools關於SVG基礎教學的最後部分，漸層的效果就是讓顏色漸漸地轉變成另一種顏色，而在SVG中的漸層又有兩種主要的類型，分別是線性(Linear)漸層和放射(Radial)漸層。 SVG : 漸層 (僅列出部分有使用到的屬性) <svg></sv
不定更新、可能爛尾XD 學習資源: W3Schools、其他網路資料 SVG有提供Filter(濾鏡)這個東西，可以用來在SVG圖形上加入特殊的效果，像是圖形模糊化、產生圖形陰影、將雜訊加入圖形等。以下介紹的是圖形模糊化、產生圖形陰影這2個濾鏡效果。 瀏覽器對於SVG Filter的支援 (取自SVG Filters - W3Schools) SVG : 濾鏡 (僅列出部分有使用到的
不定更新、可能爛尾XD 學習資源: W3Schools、其他網路資料 在前面的微筆記中，有使用到<line></line>來繪製線段，雖然還沒寫SVG Path的內容，但Path其實也能拿來繪製線段喔! 在本篇微筆記會使用到非常簡單的Path來繪製線段，並介紹幾種線段的特性(Stroke Property)。 SVG : 線段 (僅列出部分有使用到的屬性) &l
不定更新、可能爛尾XD 學習資源: W3Schools、其他網路資料 之前有段時間挺忙的，所以停更了好一陣子 ಥ⌣ಥ，但至少還沒爛尾 ٩(๑❛ᴗ❛๑)۶。 原本按照W3Schools的SVG教學，這篇筆記應該是關於Path的內容，不過SVG的Path實在是有點複雜(也可以說是SVG中最難的部分)，所以我會放在比較後面才去寫筆記整理重點。 SVG : 文字 (僅列出部分有使用到的屬性)
不定更新、可能爛尾XD 學習資源: W3Schools、其他網路資料 SVG : 多邊形 (僅列出部分有使用到的屬性) <svg></svg> height : 整個圖形(畫布)的原始長度 width: 整個圖形(畫布)的原始寬度 <polygon></polygon> 或 <polygon /> points :
不定更新、可能爛尾XD 學習資源: W3Schools、其他網路資料 這篇筆記使用到的圖形屬性，基本上都跟矩形那篇差不多。 SVG : 圓形 (僅列出部分有使用到的屬性) <svg></svg> height : 整個圖形(畫布)的原始長度 width: 整個圖形(畫布)的原始寬度 <circle></circle> 或 <
不定更新、可能爛尾XD 學習資源: W3Schools、其他網路資料 前置 : 開發環境 在開始畫SVG圖形前，需要先建好開發環境，以下是我的配置 : (瀏覽器、原始碼編輯器、擴充套件) Chrome Microsoft Visual Studio Code Live Server (即時預覽網頁) Prettier - Code formatter (原始碼自動排版) Intelli
不定更新、可能爛尾XD 學習資源: W3Schools、其他網路資料 關於 SVG SVG 全名為 Scalable Vector Graphics 即"可縮放向量圖形"，主要特點有這些 : SVG 圖形可自由進行縮放而不影響圖形的品質 SVG 圖形可經由文字編輯器建立、編輯 因為 SVG 採用 XML 格式進行編輯，而 XML 是以純文字作為基礎的標記式語言