使用JavaScript的baseVal与animVal获取动画描边属性值可行吗？

嘿，这个问题问得很精准！答案是肯定的——你完全可以通过baseVal和animVal来获取stroke-dasharray和stroke-dashoffset的动画值，就像你用它们获取变换角度那样。下面给你拆解具体的用法：

1. 获取stroke-dashoffset的基础值与动画值 #

stroke-dashoffset对应的DOM接口是SVGAnimatedLength，所以你可以直接通过属性链拿到对应的数值：

// 选中目标SVG元素（比如path）
const targetPath = document.querySelector('path');

// 获取基础偏移值（未动画时的初始值）
const baseDashOffset = targetPath.strokeDashoffset.baseVal.value;
// 获取动画运行中的实时偏移值
const animDashOffset = targetPath.strokeDashoffset.animVal.value;

2. 获取stroke-dasharray的基础值与动画值 #

stroke-dasharray对应的是SVGAnimatedNumberList类型，它的baseVal和animVal都是SVGNumberList对象，需要通过遍历或者索引来获取具体的 dash 数值：

const targetPath = document.querySelector('path');

// 获取基础的dash数组（未动画时的初始配置）
const baseDashArray = targetPath.strokeDasharray.baseVal;
// 遍历输出每个dash的长度
for (let i = 0; i < baseDashArray.numberOfItems; i++) {
  console.log('基础dash长度:', baseDashArray.getItem(i).value);
}

// 获取动画运行中的实时dash数组
const animDashArray = targetPath.strokeDasharray.animVal;
// 遍历输出动画中的实时dash长度
for (let i = 0; i < animDashArray.numberOfItems; i++) {
  console.log('动画dash长度:', animDashArray.getItem(i).value);
}

小提醒 #

要确保你操作的是SVG元素（比如<path>、<line>、<circle>等），这些属性是SVG特有的DOM接口，普通HTML元素没有这些属性哦。

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