WordPress Avada主题中实现含MorphSVGPlugin的动画代码遇阻求助

嘿，我完全懂你现在的头疼——想在Avada主题的WordPress站点上实现那个流畅的SVG变形动画，结果要么出来一片空白，要么动画全叠在一起没效果，而且你对代码不太熟，这确实让人摸不着头脑。我来一步步帮你把这个问题搞定：

第一步：先搞定核心依赖（这是动画能跑起来的关键！） #

那个变形动画用了GSAP（GreenSock Animation Platform）的MorphSVG插件，你得先把这两个东西加载到网站里，不然你的JS代码就是“无米之炊”。

• 打开WordPress后台，找到Avada > 选项 > 自定义代码 > 页脚代码（放页脚比页眉更友好，不影响页面加载速度），粘贴下面的代码：

  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/MorphSVGPlugin.min.js"></script>
  

  保存设置，这一步先确保动画的“引擎”已经装上了。

第二步：正确嵌入SVG元素 #

你需要把完整的SVG图形（包含#d1_li到#d9_li这些路径）放到页面里，别用那些不靠谱的代码生成器直接丢，用Avada自带的工具更稳妥：

• 打开你要添加动画的页面编辑器，找到**代码块（Code Block）**模块，拖到页面合适的位置。
• 在代码块的HTML标签页里，粘贴完整的SVG代码（你可以从参考示例里复制全部SVG内容）。注意要保证每个路径的ID和你JS里的#d1_li到#d9_li完全对应，不能错。
• 要是担心SVG显示尺寸不对，在代码块的CSS标签页里加一点样式：

  #svg {
    width: 100%;
    max-width: 800px;
    height: auto;
    margin: 0 auto;
  }
  

  这样SVG会自适应页面宽度，不会因为尺寸问题变成空白。

第三步：正确添加动画JS代码 #

之前动画没效果，很大概率是JS代码执行太早，页面元素还没加载完就跑了，找不到SVG路径。咱们把代码包起来，等页面完全加载再执行：

• 回到代码块的JS标签页，粘贴下面的代码（把你原来的JS内容放进去，外面套上DOM加载事件）：

  document.addEventListener('DOMContentLoaded', function() {
    // 转换路径的代码
    var d1_li = MorphSVGPlugin.convertToPath("#d1_li"),
        d2_li = MorphSVGPlugin.convertToPath("#d2_li"),
        d3_li = MorphSVGPlugin.convertToPath("#d3_li"),
        d4_li = MorphSVGPlugin.convertToPath("#d4_li"),
        d5_li = MorphSVGPlugin.convertToPath("#d5_li"),
        d6_li = MorphSVGPlugin.convertToPath("#d6_li"),
        d7_li = MorphSVGPlugin.convertToPath("#d7_li"),
        d8_li = MorphSVGPlugin.convertToPath("#d8_li"),
        d9_li = MorphSVGPlugin.convertToPath("#d9_li");
  
    // 完整的GSAP时间线动画代码
    var tl = gsap.timeline({repeat: -1, repeatDelay: 0.5});
    tl.to("#d1_li", {duration: 1, morphSVG: d2_li})
      .to("#d1_li", {duration: 1, morphSVG: d3_li})
      .to("#d1_li", {duration: 1, morphSVG: d4_li})
      .to("#d1_li", {duration: 1, morphSVG: d5_li})
      .to("#d1_li", {duration: 1, morphSVG: d6_li})
      .to("#d1_li", {duration: 1, morphSVG: d7_li})
      .to("#d1_li", {duration: 1, morphSVG: d8_li})
      .to("#d1_li", {duration: 1, morphSVG: d9_li})
      .to("#d1_li", {duration: 1, morphSVG: d1_li});
  });
  

  这样代码会等页面所有元素都加载好再执行，就不会出现找不到路径的问题了。

第四步：解决动画重叠的问题 #

如果之前出现动画全叠在一起的情况，你检查这两点：

• 确保页面里只有一组#d1_li到#d9_li的SVG元素，别重复添加了好几次SVG。
• 确保JS代码只加了一次，不要在页眉、页脚和代码块里重复放同一个动画代码。

做完这些步骤，刷新页面应该就能看到和参考示例一样的流畅变形动画啦！

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