Svelte中tweened结合d3.interpolateString实现多SVG路径插值动画失败

核心问题 #

你的代码存在两个关键错误，导致动画无法触发：

1. 错误暴露tweened存储为Props
   你将animated_path声明为export let，这会让它成为组件的外部传入属性，破坏了tweened存储的内部状态管理逻辑。Svelte的Props机制会干扰存储的响应式更新，导致tween动画无法正常触发。

2. 初始值设置为null
d3-interpolate的interpolateString无法处理null到SVG路径字符串的插值计算，第一次更新时会直接跳变到目标路径，没有过渡动画。

修正后的组件代码 #

<script>
  import { tweened } from "svelte/motion";
  import { interpolateString } from "d3-interpolate";

  export let v;
  // 用传入的初始v作为tweened的初始值，仅在组件内部维护该存储
  const animated_path = tweened(v, {
    interpolate: interpolateString,
    duration: 1000,
  });

  // 当v变化时触发路径插值动画
  $: animated_path.set(v);
</script>

<path d={$animated_path} fill="none" stroke="black" />

父组件注意事项 #

确保切换路径数组时，数组的引用或内部元素确实发生变化：

• 如果是修改数组元素，需通过重新赋值触发响应式更新，比如：

  // 错误：仅修改元素，Svelte可能检测不到变化
  paths[0] = newPath;
  // 正确：重新赋值数组，触发响应式更新
  paths = paths.map((p, i) => i === 0 ? newPath : p);
  

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