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

【问题标题】：How to achieve overflow hidden with svg animation?如何用svg动画实现溢出隐藏？
【发布时间】：2018-03-09 06:32:46
【问题描述】：

我正在尝试为 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/

我试图能够在它的组/容器中水平地动画这个波。我知道 SVG 不支持溢出：隐藏；内，那么这将如何实现？面膜有用吗？如果需要，我愿意使用 snap.svg。我将在这个 svg 中移动其他元素，所以曲线需要在同一个 svg 中。

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

【问题讨论】：

SVG 确实支持 overflow:hidden 所以你知道是错的。
@RobertLongson 嘿伙计，我说的是“在 SVG 内”。如果您阅读规范，您会发现我所知道的并没有错。 “overflow 属性仅适用于建立新视口的元素、元素和元素。对于所有其他元素，该属性无效。”通过 MDN：developer.mozilla.org/en-US/docs/Web/SVG/Attribute/overflow 感谢您的帮助。

标签： javascript css svg css-animations snap.svg

【解决方案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/

【讨论】：

嘿！感谢您的尝试，但这只是将波浪拉成一条线。也许我应该更清楚地解释，但我试图水平移动这条线并让它重复给它波浪的效果。可以看theoutline.com参考效果。再次感谢您的尝试！
谢谢！这对我有用！您提供的代码只有一个问题。假设我想将路径更改为更长的路径，我已经更新了视图框和 svg 宽度，但是当放置更长的路径时，它不再可见。 jsfiddle.net/bje5rxzs/7我错过了调整吗？
它可能与路径有关，以及它相对于 svg viewBox 的放置位置。您需要确保它适合您的画板，并且它与您想要的精确重叠，然后使用导出的 svg 代码，而不是我现有的代码。换句话说，以我的代码为例，而不是自己重新创建它。
再次感谢，确实是路径:)

【解决方案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>

【讨论】：