具有透明背景的 SVG 蒙版线动画

Question

我正在尝试使用 SVG 遮罩技术突出显示 HTML5 中的一个词。

这是我用来在 SVG 路径上实现动画的 CSS 代码：

  @keyframes dash {
    from {
      stroke-dashoffset: 530;    
    }
    to {
      stroke-dashoffset: 0;    
    }
  } 

  .shape path {
    stroke-dasharray: 530;
    stroke-dashoffset: 0;  
    fill: white;
    opacity: 0;
  }

  .shape.active path {
    opacity: 1;
    animation: dash .5s ease-in forwards;
  }

总的来说，它运作良好。但是，它在播放动画时显示白色填充背景：

我怎样才能使它透明，以便它可以在任何背景颜色上工作？

这里是代码链接，您可以在其中查看动画：https://codepen.io/willhalling/pen/QWpXpQa

已编辑：我已更新 codepen 链接以包含 @enxaneta 解决方案