使用jQuery加载的SVG无法通过anime.js实现动画的问题求助

核心问题定位 #

你遇到的问题本质是异步加载时机不匹配：SVG通过load()异步加载，动画代码如果在SVG未加载完成时执行，会找不到目标元素；而直接写入HTML时元素一开始就存在，所以动画正常。

具体修复步骤 #

1. 把动画代码放在load()的回调函数内 #

确保动画在SVG完全加载后才执行，这是最关键的一步：

$("#testdiv").load("/svg/titles.svg", function() {
  // SVG加载完成后立即初始化动画
  anime({
    targets: '#testdiv .orgChartSVG path', // 明确限定查找范围，避免全局匹配出错
    strokeDashoffset: [anime.setDashoffset, 0],
    easing: 'easeInOutSine',
    duration: 1500,
    delay: function(el, i) { return i * 250 },
    direction: 'alternate',
    loop: true
  });
});

2. 若需点击触发动画，用事件委托或加载后绑定 #

如果你的动画是点击触发，不要在全局提前绑定事件（此时元素还不存在），可以二选一：

• 方案A：加载完成后直接绑定点击事件

$("#testdiv").load("/svg/titles.svg", function() {
  $('#testdiv .orgChartSVG').on('click', function() {
    anime({
      targets: $(this).find('path'),
      strokeDashoffset: [anime.setDashoffset, 0],
      easing: 'easeInOutSine',
      duration: 1500,
      delay: function(el, i) { return i * 250 },
      direction: 'alternate',
      loop: true
    });
  });
});

• 方案B：用事件委托（无需等待SVG加载完成）

// 提前绑定事件委托，点击时自动匹配已加载的元素
$(document).on('click', '#testdiv .orgChartSVG', function() {
  anime({
    targets: $(this).find('path'),
    strokeDashoffset: [anime.setDashoffset, 0],
    easing: 'easeInOutSine',
    duration: 1500,
    delay: function(el, i) { return i * 250 },
    direction: 'alternate',
    loop: true
  });
});

// 加载SVG
$("#testdiv").load("/svg/titles.svg");

3. 检查SVG元素的基础属性 #

确保SVG里的path元素有以下属性，否则动画执行了也看不到效果：

<path d="..." stroke="#000" stroke-width="2" fill="none" />

• stroke：设置描边颜色
• stroke-width：设置描边宽度
• fill="none"：避免填充覆盖描边动画

4. 验证选择器正确性 #

确认.orgChartSVG是SVG根元素的类名，且加载后能通过$('#testdiv .orgChartSVG path')找到目标元素（可以在浏览器控制台执行该选择器，看是否返回非空的DOM集合）。

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