带图片背景的SVG自绘制效果实现问题求助

现有普通SVG自绘制代码 #

你已通过GSAP实现普通SVG路径自绘制，代码如下：

const svg = document.querySelector("path");
const length = svg.getTotalLength();
svg.style.strokeDasharray = length;
svg.style.strokeDashoffset = length;

gsap.to(svg, {
  strokeDashoffset: 0,
  duration: 5, 
  ease: "power1.inOut"
});

目标SVG结构 #

你希望实现带图片背景的SVG自绘制，目标结构如下：

<svg id="svg1" class="display" viewBox="0 0 300 300">
      <defs>
          <clipPath id="mask">
              <path id="logo" d=""/> <!-- 需填充实际路径数据 -->
          </clipPath>
      </defs>
<g clip-path="url(#mask)">
    <rect width="212" height="208" fill="#fff"></rect>
    <image id="bg3" class="bg" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/wavey.png"></image>
</g>
</svg>

实现带图片背景的自绘制效果 #

要实现目标效果，核心是让图片跟随路径绘制进度逐步显示，具体实现步骤如下：

1. 调整SVG结构 #

在SVG中添加一个与裁剪路径路径完全一致的描边路径（用于显示绘制动画），同时确保裁剪路径的路径有完整的d数据：

<svg id="svg1" class="display" viewBox="0 0 300 300">
      <defs>
          <clipPath id="mask">
              <path id="clipPathPath" d="你的实际路径数据"/> <!-- 替换为目标路径 -->
          </clipPath>
      </defs>
      <!-- 用于描边动画的路径，样式可按需调整 -->
      <path id="drawPath" d="你的实际路径数据" fill="none" stroke="#000" stroke-width="2"/>
<g clip-path="url(#mask)">
    <rect width="212" height="208" fill="#fff"></rect>
    <image id="bg3" class="bg" xlink:href="assets/wavey.png" width="300" height="300"></image>
</g>
</svg>

2. GSAP动画实现 #

使用GSAP的DrawSVG插件控制路径显示范围，同步裁剪路径与描边路径的动画，让图片随路径绘制逐步露出：

// 引入GSAP及DrawSVG插件后注册
gsap.registerPlugin(DrawSVGPlugin);

const clipPathPath = document.querySelector("#clipPathPath");
const drawPath = document.querySelector("#drawPath");

// 初始化：让路径完全不可见
gsap.set([clipPathPath, drawPath], { drawSVG: "0% 0%" });

// 创建时间线执行同步动画
const tl = gsap.timeline();
tl.to([clipPathPath, drawPath], {
  drawSVG: "0% 100%",
  duration: 5,
  ease: "power1.inOut"
});

3. 细节优化 #

• 给image标签设置与SVG viewBox匹配的width和height，避免图片变形。
• 若无需显示描边路径，可直接移除drawPath元素，仅对clipPathPath执行动画。
• 调整描边路径的stroke-width、stroke-color匹配设计需求。

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