Plugin

DrawSVG：描邊繪製

動畫 SVG stroke 的可見區段（drawSVG），做出「線被畫出來」的效果。

導讀

drawSVG 描述的是 stroke 上可見的 start–end 區段，不是 fill。元素要有 stroke。

看什麼
路徑從無到有被「畫」出來；也可只顯示中段。
怎麼試
改 duration、segment 起迄，或 reverse 擦除。
Skill 對應：DrawSVGPlugin, drawSVG 0→100%, fromTo segment
  • 元素必須有可見 stroke（不含 fill 動畫）
  • drawSVG: 0 → 無描邊；"100%" = "0% 100%" 全長
  • 也可只顯示中段："20% 80%"
  • from / fromTo 控制繪製方向與擦除
gsap.from("#path", { duration: 1.5, drawSVG: 0 });
// 或明確區段：
gsap.fromTo("#path",
  { drawSVG: "0% 0%" },
  { drawSVG: "0% 100%", duration: 1.5 });
DrawSVG