SVG 动画参数提取

设计工具

svgator

设计界面

导出界面

SVG文件分析

动画模式

CSS动画

Javascript 动画

CSS 参数识别

方案

1. 获取SVG中的style标签
2. 采用正则匹配 css 标签中的动画属性，时间参数
3. 动态修改时间参数并复写svg的style标签

Code

export const resetAnimationStyleBySpeed = function(styleTag,speed){
  for(let i=0;i<styleTag.childNodes.length;i++){
    if(styleTag.childNodes[i].nodeName!=='#cdata-section') continue;
      let cssText = styleTag?.childNodes[i]?.textContent
      if(cssText && typeof cssText === 'string'){
        const times = cssText.match(/([0-9]*)?ms/g)
        if(!times) return
        for(let i = 0; i < times.length;i++){
          const time = parseFloat(times[i])
          const newTime = (100 - speed) / 100 * time
          const timeUnit = times[i].replace(time.toString(),'')
          const newTimeString = newTime.toString() + timeUnit
          cssText = cssText.replace(times[i],newTimeString)
        }
        styleTag.childNodes[i].textContent = cssText
      }
  }
}

小结

采用 svgator设计的SVG动画，可以通过两种方式导出，CSS和JavaScirpt。采用CSS方式导出的基于CSS规则的动画容易被识别、提取、修改。基于JavaScirpt方式导出的SVG动画目前不支持提取参数。