基于Svelte、D3与Svelte Motion的路径补间动画问题求助

核心问题根源 #

切换路径时出现突变，本质是新旧路径元素被直接销毁重建，而非在同一个元素上更新路径数据。单路径过渡能生效是因为一直操作同一个元素的d属性，但多路径切换时如果用条件渲染（比如{#if}），会导致元素被替换，过渡的上下文直接丢失。

具体解决方案 #

1. 复用单个路径元素，杜绝元素替换 #

别用条件渲染切换不同路径，始终保留一个<path>元素，通过更新绑定的d属性来切换路径。示例：

<path 
  d={currentPath} 
  fill="none" 
  stroke="black" 
  stroke-width="2"
/>

这里currentPath是当前选中的路径数据，切换时直接更新这个变量就行，不用换<path>元素。

2. 用D3的attrTween实现d属性平滑过渡 #

借助D3的路径插值能力，在currentPath变化时给路径元素加过渡：

import { select } from 'd3';
import { tick } from 'svelte';

let pathElement;
let currentPath = initialPath;

async function switchPath(newPath) {
  await tick(); // 等Svelte把DOM更新完
  select(pathElement)
    .transition()
    .duration(700)
    .attrTween('d', function() {
      const pathInterp = d3.interpolate(currentPath, newPath);
      return (t) => pathInterp(t);
    });
  currentPath = newPath;
}

模板里绑定路径元素：

<path 
  bind:this={pathElement}
  d={currentPath} 
  fill="none" 
  stroke="black" 
  stroke-width="2"
/>

3. Svelte Motion替代方案：自定义路径插值 #

如果想用Svelte Motion，得给d属性加自定义插值——因为Svelte Motion默认不会处理路径字符串的平滑过渡，得靠D3的插值函数：

import { motion } from 'svelte-motion';
import { interpolate } from 'd3';

// 自定义路径插值函数
const pathInterp = (startPath, endPath) => {
  const interp = interpolate(startPath, endPath);
  return (t) => interp(t);
};

<motion.path
  d={currentPath}
  animate={{ d: currentPath }}
  transition={{ duration: 700, ease: 'easeInOut' }}
  custom={{ interpolate: pathInterp }}
  fill="none"
  stroke="black"
  stroke-width="2"
/>

4. 避坑提醒 #

• 别用{#each}或{#if}直接切换路径元素，一换元素过渡就失效；
• 更新路径前一定要等tick()，确保DOM已经同步到最新状态；
• 所有路径数据格式要统一，要么都是标准SVG路径字符串，要么都是D3处理过的路径对象，不然插值会出错。

内容的提问来源于stack exchange，提问作者Pascal Schmidt