如何实现用svg动画隐藏溢出？

Question

我正在尝试为 svg 中的路径设置动画。路径是一条看起来像波浪的波浪线。我想要做的是让这条路径在无限循环上水平平移，让它看起来好像水在移动。

您可以看到轮廓实现了类似的效果，只是垂直方向，这不在 SVG 中：https://theoutline.com/

这是我目前使用的 JsFiddle 和 svg wave/squiggle。

<g class="wave-container">
  <path class="wave" d="M1,1c1.6,0,1.6,1.6,3.3,1.6S5.9,1,7.6,1c1.6,0,1.6,1.6,3.3,1.6S12.5,1,14.2,1s1.6,1.6,3.3,1.6
                c1.6,0,1.6-1.6,3.3-1.6"/>
</g>

https://jsfiddle.net/bje5rxzs/

我正在尝试能够在 group/container 内水平设置此波浪的动画。我知道 SVG 不支持 overflow:hidden；在里面，那么这将如何实现呢？戴口罩有用吗？如果需要，我愿意使用 snap.svg。我会让这个 svg 中的其他元素移动，所以波浪线需要在同一个 svg 中。

非常感谢任何帮助！谢谢:)

Answer 1

已更新

就像任何改变位置的动画一样，您可以使用变换。

这里的关键是使波浪形路径比 svg 视图框更宽，并在 svg 上设置 overflow:hidden（支持）。

由于您的插图很小，我不得不将 svg viewbox 也做得很小，只有 15px 宽，这样路径就可以与 svg 容器重叠。

<svg version="1.1" x="0px" y="0px" width="15px" height="3.6px" viewBox="0 0 15 3.6">
   <path class="white-path animate" d="M1,1c1.6,0,1.6,1.6,3.3,1.6S5.9,1,7.6,1c1.6,0,1.6,1.6,3.3,1.6S12.5,1,14.2,1s1.6,1.6,3.3,1.6 c1.6,0,1.6-1.6,3.3-1.6"/>
</svg>

css:

svg {
  overflow:hidden;
}
.white-path {
  fill:none;
  stroke:#FFFFFF;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-miterlimit:10;
 }
 @keyframes squiggle {
   from {
     transform: translateX(-7px)
   }
   to {
     transform: translateX(0px)
   }
 }
 .animate {
   animation: squiggle 1s linear infinite;
 }

我使用负 x 平移，并通过反复试验选择了正确的距离，因此循环是无缝的。

演示： https://jsfiddle.net/bje5rxzs/6/

Answer 2

你可以嵌套 2 个 svg。

var x = -5
setInterval(() => {
  wave.setAttribute("transform", `translate(${x},0)`)
  if (x >= 0) {
    x = -5
  } else {
    x++
  }
}, 100)

<svg viewBox="0 0 300 300" width="200" height="200">
<circle cx="150" cy="150" r="150" fill="red"/>
  <svg x="50" y="50" viewBox="1 0 10 3.5" width="100" height="35">
    <path id="wave" transform="translate(-5,0)" d="M1,1c1.6,0,1.6,1.6,3.3,1.6S5.9,1,7.6,1c1.6,0,1.6,1.6,3.3,1.6S12.5,1,14.2,1s1.6,1.6,3.3,1.6
                c1.6,0,1.6-1.6,3.3-1.6" fill="none" stroke="black"/>

  </svg>
</svg>

如何实现用svg动画隐藏溢出？

How to achieve overflow hidden with svg animation?

javascript

css

svg

css-animations

snap.svg