svgアニメーションでオーバーフローを隠す方法を教えてください。

Question

私はSVG内のパスをアニメーション化しようとしています。 パスは、波のように見えるように波打ちのある線です。私がしようとしていることは、水が動いているかのように見せるために、このパスを無限ループ上で水平に平行移動させることです。あなたは垂直方向にのみ起こって、輪郭線によって達成同様の効果を見ることができ、これはSVG内にない

：ここhttps://theoutline.com/

は、私はSVG波/波線で、これまで持ってい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を使用しています。私はこの動きの中で他の要素を持つことになるでしょう。だからsquiggleは同じsvg内にある必要があります。

ご迷惑をおかけして申し訳ありません。ありがとう:)

Answer 1

はあなたが変換を使用することができます何かの位置を変更している任意のアニメーションのように

を更新しました。

ここで重要なのは、波線パスをsvgビューボックスよりも広くし、を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>