[Feature]: 边自定义动画希望保留原有边，动画覆盖在边上展示。

[WangJincheng4869]

背景&目的

现在的东湖是覆盖了原有边的样式，无法实现更加自由的动画效果，如果保留原有边效果，动画属于覆盖层，那么可以实现以下效果

[wumail]

我理解你在自定义节点里自行通过字段控制边的样式就能实现你的需求了

[WangJincheng4869]

我理解你在自定义节点里自行通过字段控制边的样式就能实现你的需求了

但是当我开启动画的时候，会覆盖掉我自定义的样式

/**
 * 自定义直角折线边
 */
class SpPolylineEdgeModel extends PolylineEdgeModel {
  createId(): string {
    return nanoid();
  }

  setAttributes() {
    this.isAnimation = true;
  }

  getEdgeStyle() {
    const style = super.getEdgeStyle();
    const { properties } = this;
    if (properties.isActived) {
      style.strokeDasharray = '4 4';
    }
    style.stroke = 'orange';
    return style;
  }
}

[wumail]

我理解你在自定义节点里自行通过字段控制边的样式就能实现你的需求了

但是当我开启动画的时候，会覆盖掉我自定义的样式

/**
 * 自定义直角折线边
 */
class SpPolylineEdgeModel extends PolylineEdgeModel {
  createId(): string {
    return nanoid();
  }

  setAttributes() {
    this.isAnimation = true;
  }

  getEdgeStyle() {
    const style = super.getEdgeStyle();
    const { properties } = this;
    if (properties.isActived) {
      style.strokeDasharray = '4 4';
    }
    style.stroke = 'orange';
    return style;
  }
}

动画的样式也可以自定义

[WangJincheng4869]

我理解你在自定义节点里自行通过字段控制边的样式就能实现你的需求了

但是当我开启动画的时候，会覆盖掉我自定义的样式

/**
 * 自定义直角折线边
 */
class SpPolylineEdgeModel extends PolylineEdgeModel {
  createId(): string {
    return nanoid();
  }

  setAttributes() {
    this.isAnimation = true;
  }

  getEdgeStyle() {
    const style = super.getEdgeStyle();
    const { properties } = this;
    if (properties.isActived) {
      style.strokeDasharray = '4 4';
    }
    style.stroke = 'orange';
    return style;
  }
}

动画的样式也可以自定义啊

仅自定义动画没有找到办法实现我想要的效果，因为动画中点的宽度是要比边宽的，是覆盖在边上的动画。
我查了一下 polyline 的 API，没有找到合适的办法，目前想到的办法就是动画边和边分离，动画边可以覆盖到边上面。
类似这种效果：

[wumail]

我理解你在自定义节点里自行通过字段控制边的样式就能实现你的需求了

但是当我开启动画的时候，会覆盖掉我自定义的样式

/**
 * 自定义直角折线边
 */
class SpPolylineEdgeModel extends PolylineEdgeModel {
  createId(): string {
    return nanoid();
  }

  setAttributes() {
    this.isAnimation = true;
  }

  getEdgeStyle() {
    const style = super.getEdgeStyle();
    const { properties } = this;
    if (properties.isActived) {
      style.strokeDasharray = '4 4';
    }
    style.stroke = 'orange';
    return style;
  }
}

动画的样式也可以自定义啊

仅自定义动画没有找到办法实现我想要的效果，因为动画中点的宽度是要比边宽的，是覆盖在边上的动画。 我查了一下 polyline 的 API，没有找到合适的办法，目前想到的办法就是动画边和边分离，动画边可以覆盖到边上面。 类似这种效果：

https://developer.mozilla.org/zh-CN/docs/Web/SVG/SVG_animation_with_SMIL SMIL动画应该也可以实现
SMIL路径动画例子：https://svg-animation-booklet.vercel.app/chapter6.html#svg-smil-animation
需要继承Polyline自定义边，重写getEdge方法

[boyongjiong]

上面提供了解决方案，目前不会就这个功能开发 feature，故先将此 issue 关闭