SVG SMIL动画如何实现任意属性从当前状态到目标状态的过渡？

针对你遇到的SVGRect、SVGTransformList这类非字符串属性无法用现有代码做过渡的问题，给出以下三种需求的具体实现方案：

1. 将复杂属性值转换为字符串格式 #

针对不同的SVG复杂类型，编写类型判断逻辑，把对应的属性值转成符合SVG属性语法的字符串：

function attrValueToString(value: any): string {
  // 处理SVGRect类型（比如viewBox属性）
  if (value instanceof SVGRect) {
    return `${value.x} ${value.y} ${value.width} ${value.height}`;
  }
  // 处理SVGTransformList类型（比如transform属性）
  else if (value instanceof SVGTransformList) {
    return Array.from(value).map(transform => transform.toString()).join(' ');
  }
  // 其他类型优先调用自身toString方法，兜底转字符串
  else if (typeof value.toString === 'function') {
    return value.toString();
  }
  return String(value);
}

// 修改原transition函数使用转换逻辑
const animate: SVGAnimateElement; 
function transition(attribute: keyof SVGGElement, to: string) {
  const initialState = animate.parentElement[attribute].animVal;
  animate.setAttribute('from', attrValueToString(initialState));
  animate.setAttribute('to', to);
  animate.beginElement();
}

2. 直接为animate元素设置复杂对象类型的值 #

SVGAnimateElement本身不支持直接传入复杂对象类型的from/to值，但可以针对特定属性使用对应的专用动画元素：

• 处理transform属性时，使用SVGAnimateTransformElement，可以指定变换类型并传入对应格式的参数：

  // 示例：处理translate变换
  const animateTransform: SVGAnimateTransformElement = document.createElementNS("http://www.w3.org/2000/svg", "animateTransform");
  animateTransform.setAttribute('attributeName', 'transform');
  animateTransform.setAttribute('type', 'translate');
  
  // 从当前位置过渡到(100, 100)
  animateTransform.setAttribute('from', 'current');
  animateTransform.setAttribute('to', '100 100');
  animate.parentElement.appendChild(animateTransform);
  animateTransform.beginElement();
  

• 对于viewBox这类矩形属性，没有专用动画元素，还是需要转成字符串格式使用普通的SVGAnimateElement。

3. 其他从当前状态启动动画的方式 #

方式一：利用SMIL的current关键字 #

SMIL动画支持from="current"，浏览器会自动获取属性的当前值作为动画起点，无需手动获取和转换：

const animate: SVGAnimateElement; 
function transition(attribute: keyof SVGGElement, to: string) {
  animate.setAttribute('attributeName', attribute);
  animate.setAttribute('from', 'current');
  animate.setAttribute('to', to);
  // 可选设置动画时长
  animate.setAttribute('dur', '0.5s');
  animate.beginElement();
}

这种方式自动适配所有SVG属性类型，包括viewBox、transform等。

方式二：使用Web Animations API #

Web Animations API可以直接操作SVG的复杂属性类型，无需依赖SMIL动画元素，灵活性更高：

function transition(attribute: keyof SVGGElement, to: any) {
  const element = animate.parentElement;
  // 直接传入属性的当前值和目标值
  element.animate(
    [
      { [attribute]: element[attribute].animVal },
      { [attribute]: to }
    ],
    {
      duration: 500, // 动画时长（毫秒）
      fill: 'forwards', // 动画结束后保持目标状态
      easing: 'ease-in-out' // 缓动效果
    }
  );
}

该API支持SVGRect、SVGTransformList等复杂类型，且不需要处理字符串转换。

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