Question

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

您可以看到大纲实现的类似效果，只能垂直移动，而且不在SVG中：https://theoutline.com/

这是我到目前为止使用svg wave / squiggle的JsFiddle。

<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/

我试图能够在它的组/容器中水平设置此wave的动画。我知道SVG不支持溢出：隐藏;在内，那怎么会实现呢？面具会起作用吗？如果需要，我愿意使用snap.svg。我将在这个svg中有其他元素移动，所以波形需要在同一个svg内。

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

Answer 1

<强>更新

就像你正在改变某些位置的动画一样，你可以使用变换。

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

由于你的插图很小，我不得不使svg视图也很小，只有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动画隐藏的溢出？

2 个答案: