Svelte draw过渡在函数返回SVG路径d属性时初始渲染失效问题

安全阿岳

2026-7-26

问题原因

Svelte的transition:指令仅在元素**被添加到DOM（进入）或从DOM移除（离开）**时触发动画。直接初始渲染<path>时，元素在组件挂载阶段就已存在于DOM中，没有触发"进入"动作，因此draw过渡不会执行；而通过复选框控制时，勾选操作会将<path>动态添加到DOM，触发进入过渡，所以动画正常生效。

解决方案

方案1：使用`in:draw`显式触发初始进入动画

in:指令专门用于指定元素初始渲染时的进入动画，无需依赖DOM的动态添加/移除。修改后代码：

<script>
    import { draw } from "svelte/transition";
    function path() {
        return `M 10 10 H 90 V 90 H 10 L 10 10`; // 修正原代码中多余的引号问题
    }
</script>

<svg>
    <path in:draw={{duration: 2000}} d={path()} fill="none" stroke="black"/>
</svg>

方案2：通过挂载后动态切换触发进入逻辑

利用组件挂载后切换状态，让Svelte认为元素是动态添加的，从而触发transition:draw：

<script>
    import { draw } from "svelte/transition";
    import { onMount } from "svelte";
    function path() {
        return `M 10 10 H 90 V 90 H 10 L 10 10`;
    }
    let isMounted = false;
    onMount(() => {
        isMounted = true;
    });
</script>

<svg>
    {#if isMounted}
        <path transition:draw={{duration: 2000}} d={path()} fill="none" stroke="black"/>
    {/if}
</svg>