0Pricing
Sveltejs Academy · 课时

使用 transition:draw 绘制 SVG 路径

使用 draw 过渡逐步为 SVG 描边添加动画。

使用 transition:draw 绘制 SVG 路径 是 CoddyKit 上的免费 Sveltejs Academy 课时。 这是第 4 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Sveltejs Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Sveltejs Academy 课程共包含 4 节课。

draw 过渡效果

draw 过渡效果会逐步显示 SVG 路径的描边，从而为其添加动画。

导入

它来自 svelte/transition。

import { draw } from "svelte/transition";

应用于路径

将它附加到带有描边的 SVG <path> 元素上。

<svg viewBox="0 0 100 100">
  {#if visible}
    <path transition:draw={{ duration: 1000 }} d="M10,50 L90,50" stroke="black" />
  {/if}
</svg>

必须有描边

路径必须具有可见描边。只有填充的路径无法绘制。

时长和缓动

与其他过渡效果一样，它接受 duration、delay 和 easing。

使用场景

标志显示、签名动画、数学绘图和信息图开场动画。

与淡出结合

使用 in:draw 和 out:fade，为进入和退出设置相应的效果。

计算长度

该过渡效果在内部使用 getTotalLength()。复杂路径也能自然地播放动画。

多路径动画

使用 delay 在多条路径上依次绘制，以编排显示过程。

{#each paths as p, i}
  <path d={p} stroke="black" transition:draw={{ delay: i * 100 }} />
{/each}

性能

在大多数设备上都很流畅；在移动设备上，超长路径可能需要缩短时长。

浏览器支持

只要支持 SVG 和 CSS 动画就能运行（所有现代浏览器均支持）。

快速检查

transition:draw 需要什么？

回顾

在带有描边的 SVG 路径上使用 transition:draw，即可为矢量图形添加逐步绘制动画。

常见问题解答

「使用 transition:draw 绘制 SVG 路径」课时是免费的吗？

是的 — 「使用 transition:draw 绘制 SVG 路径」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Sveltejs Academy 课程的其余内容，请升级到 CoddyKit PRO。 Sveltejs Academy 课程共包含 4 节课。

「使用 transition:draw 绘制 SVG 路径」这节课中我会学到什么？

使用 draw 过渡逐步为 SVG 描边添加动画。 你通过在浏览器中直接运行的动手代码来练习 Sveltejs Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Sveltejs Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Sveltejs Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 4 节课，共 4 节。

「使用 transition:draw 绘制 SVG 路径」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Sveltejs Academy 课中编写并运行代码吗？

能。每节 Sveltejs Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. transition:fade 与 transition:fly
  2. 过渡参数：duration、delay、easing
  3. 使用 in: 和 out: 实现非对称过渡
  4. 使用 transition:draw 绘制 SVG 路径
← 返回 Sveltejs Academy