SVG直线路径至展开路径平滑变形时自动闭合问题求助

这个需求完全可以实现！你遇到的路径自动闭合（添加Z指令）问题，核心原因是路径闭合状态不统一加上插值库的默认闭合路径处理逻辑导致的。下面给你详细分析和解决方案：

问题根源 #

你提到起始SVG路径带有Z闭合指令，但在代码里定义的path1又去掉了Z；而目标路径path2是完全开放的（没有Z）。无论是flubber还是D3的路径插值工具，默认都会尝试对齐两个路径的闭合状态——如果其中一个被判定为闭合，插值过程中就会强制给另一个也添加Z指令，导致路径意外闭合。

另外，即使路径起点和终点坐标非常接近，插值过程中中间态也可能被判定为需要闭合，触发自动添加Z的逻辑。

可行解决方案 #

1. 统一路径的闭合状态 #

首先确保起始路径和目标路径都是开放路径：

• 移除起始SVG和代码中path1的Z指令（你代码里已经做了这一步，但要确认SVG中的#straightTwo的d属性也去掉Z）
• 目标路径path2保持开放状态（不要添加Z）

2. 使用针对开放路径的插值方法 #

如果你用的是flubber，不要用默认的interpolate，改用interpolateOpen——这个方法专门为开放路径设计，不会自动添加闭合指令：

// 导入flubber的开放路径插值方法
import { interpolateOpen } from 'flubber';

const path1 = 'm 2,123.84 21.739273,0.0182 40.181833,0.003 391.239074,-0.14697 32.8891,0.13722 229.58891,-0.17218';
const path2 = 'M2,123.84l21.9-4v-36L470.59,1.24V81.37S635.46,68.61,696,64';

// 用interpolateOpen替代默认interpolate
const interpolator = interpolateOpen(path1, path2);

d3.select('#straightTwo')
 .transition()
 .duration(25550)
 .attrTween('d', () => interpolator);

3. 额外注意事项 #

• 确认SVG路径的fill属性为none：虽然你已经设置了，但如果fill不为none，浏览器会自动闭合路径来填充，这也可能导致变形异常。
• 路径节点顺序一致：你已经验证了节点数量一致，还要确保节点的绘制顺序（顺时针/逆时针）相同，否则可能出现扭曲变形。

替代方案（纯D3实现） #

如果你不想依赖flubber，可以使用D3的d3.interpolatePath（需要单独引入d3-path模块），它对开放路径的处理更友好：

import { interpolatePath } from 'd3-path';

const path1 = 'm 2,123.84 21.739273,0.0182 40.181833,0.003 391.239074,-0.14697 32.8891,0.13722 229.58891,-0.17218';
const path2 = 'M2,123.84l21.9-4v-36L470.59,1.24V81.37S635.46,68.61,696,64';

d3.select('#straightTwo')
 .transition()
 .duration(25550)
 .attrTween('d', () => {
   const interpolate = interpolatePath(path1, path2);
   return t => interpolate(t);
 });

这样就能实现两个开放路径之间的平滑节点拖动变形，不会出现自动闭合的问题了。

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