SVG 初心者分享
7 likes650 views
本档案是关于 SVG（可缩放矢量图形）的基础介绍，适合初学者，涵盖了基本属性、路径与图形、文本处理及剪切和遮罩等重要概念。此外，文档还提供了参考示例及相关资源，强调了 SVG 在开源、SEO 和互动性方面的优势。最后，呈现了一些实用的技巧和补充学习资源。
SVG 初心者分享
- 1. SVG 初心者分享 Jocelyn Hsu 前端魔法師小聚 ( 2016/07/06 @ 達暉資訊 ) 看懂 UI 給的亂碼檔
- 2. about me 徐如林 Jocelyn Hsu 現任職於 PIXNET 擔任前端工程師 ( 歡迎大家來當我同事~!! ) rulinshyu@gmail.com
- 3. outline what / why 基本屬性介紹 路徑與圖形 文字 defs & use 截圖與遮色片
- 4. what / why 基本屬性介紹 路徑與圖形 文字 defs & use 截圖與遮色片
- 6. what / why 開源 SEO 較好 ( 相較於 png / jpg ) 不因縮放而失真 ( 相較於 icon font ) 不限定單色 不需要使用 gif 也能有動畫 互動性更高
- 7. what / why 基本屬性介紹 路徑與圖形 文字 defs & use 截圖與遮色片
- 8. 基本屬性介紹 width & height viewBox ( ≠ viewPort ) preserveAspectRatio
- 9. 基本屬性介紹 width & height viewBox ( ≠ viewPort ) preserveAspectRatio
- 10. width & height viewBox ( ≠ viewPort ) preserveAspectRatio 基本屬性介紹 參考範例： http://codepen.io/jonitrythall/pen/8d101869058142d3ce019b249ed35e2b?editors=1100
- 11. 基本屬性介紹 width & height viewBox ( ≠ viewPort ) preserveAspectRatio
- 12. width & height viewBox ( ≠ viewPort ) preserveAspectRatio 基本屬性介紹 參考範例： http://codepen.io/jonitrythall/pen/8d101869058142d3ce019b249ed35e2b?editors=1100
- 13. 基本屬性介紹 width & height viewBox ( ≠ viewPort ) preserveAspectRatio none "對齊位置 尺寸"
- 14. 基本屬性介紹 width & height viewBox ( ≠ viewPort ) preserveAspectRatio none "對齊位置 尺寸" "對齊位置 尺寸" 對齊位置 xMin / xMid / xMax YMin / YMid / YMax 尺寸 meet / slice
- 15. 參考範例： http://codepen.io/jonitrythall/pen/8d101869058142d3ce019b249ed35e2b?editors=1100 基本屬性介紹 width & height viewBox ( ≠ viewPort ) preserveAspectRatio none "對齊位置 尺寸"
- 16. what / why 基本屬性介紹 路徑與圖形 文字 defs & use 截圖與遮色片
- 21. 路徑與圖形 這是在瀏覽器上呈現的樣子 推測：大概就是一個 circle 跟一個 polygon 吧
- 22. 路徑與圖形 這是在編輯器上的樣子
- 24. 路徑與圖形 <path d="…"></path> Mx y 開始處 Lx y 直線 Hx ⽔水平線 Vy 垂直線 Arx ry 夾⾓角 ⼤大⾓角弧? 順時鐘? x y 圓弧 Z end & closepath
- 25. 路徑與圖形 <path d="…"></path> Mx y 開始處 Lx y 直線 Hx ⽔水平線 Vy 垂直線 Arx ry 夾⾓角 ⼤大⾓角弧? 順時鐘? x y 圓弧 Z end & closepath 1 2 3 1 2 3
- 26. 路徑與圖形 <path d="…"></path> Mx y 開始處 Lx y 直線 Hx ⽔水平線 Vy 垂直線 Arx ry 夾⾓角 ⼤大⾓角弧? 順時鐘? x y 圓弧 Z end & closepath
- 27. what / why 基本屬性介紹 路徑與圖形 文字 defs & use 截圖與遮色片
- 28. 文字 x & y dx & dy textPath
- 29. 文字 x & y dx & dy textPath
- 30. 文字 x & y dx & dy textPath
- 31. 文字 x & y dx & dy textPath
- 32. 文字 x & y dx & dy textPath
- 33. 文字 x & y dx & dy textPath 參考範例： https://developer.mozilla.org/en-US/docs/Web/SVG/Element/textPath
- 34. 參考範例： https://developer.mozilla.org/en-US/docs/Web/SVG/Element/textPath 文字 x & y dx & dy textPath
- 35. what / why 基本屬性介紹 路徑與圖形 文字 defs & use 截圖與遮色片
- 42. defs & use
- 46. what / why 基本屬性介紹 路徑與圖形 文字 defs & use 截圖與遮色片
- 47. 圖形以外的都會被剪裁 定義 <clipPath> 設定 clip-path 屬性 截圖與遮色片
- 54. 截圖與遮色片 定義漸層
- 55. 截圖與遮色片 定義遮色片
- 56. 截圖與遮色片 套用遮色片
- 57. 截圖與遮色片
- 58. 截圖與遮色片 再加上一點細節 ( 理論上 )
- 60. references You, Me & SVG | codeschool SVG 完整教學 31 天 | oxxostudio SVG Tutorial | MDN http://commons.oreilly.com/wiki/index.php/SVG_Essentials https://sarasoueidan.com/tags/svg/index.html http://tutorials.jenkov.com/svg/index.html http://jonibologna.com/svg-viewbox-and-viewport/
- 61. thanks for your listening