跳轉到

建立 2026-09-14 更新 2026-09-14

進階

基本形狀與文字會了之後，教材圖還差三樣：漸層與裁切增加層次、<marker> 做箭頭、CSS／SMIL 做動畫。

這個分類有什麼

漸層、裁切與箭頭：<linearGradient>、<clipPath>、<mask>、<marker>
動畫：CSS stroke-dashoffset、@keyframes、以及何時才用 JS

官方學習資源

MDN

Gradients、Clipping and masking、<marker>、SVG animation。

影音

CSS 動畫實作看 Kevin Powell／Fireship 的 SVG + CSS 動畫與 SVG Tutorial: with CSS Animation。