このコードはchromeで動作しますが、safari、firefoxでは動作しません。 jQueryでこれを行う方法はありますか？jqueryでsvgパスをアニメーション化する方法

svg .cls-1 { 
 
    d: path("M.37,1.32V120.37C207.06,182.09,430.47,238,587.2,247.54c13.49.11,247.13,41.9,432.89-203.6q17.89-21.5,35.11-42.62Z"); 
 
    -webkit-animation: 20s top-wave linear infinite alternate; 
 
    -moz-animation: 20s top-wave linear infinite alternate; 
 
    animation: 20s top-wave linear infinite alternate 
 
} 
 
@keyframes top-wave { 
 
    from, to { 
 
    d: path("M.37,1.32V120.37C207.06,182.09,430.47,238,587.2,247.54c13.49.11,247.13,41.9,432.89-203.6q17.89-21.5,35.11-42.62Z") 
 
    } 
 
    50% { 
 
    d: path("M.37,1.32V120.37C207.08,082.09,330.47,238,587.2,47.54c13.49.11,247.13,41.9,432.89-203.6q17.89-21.5,35.11-42.62Z") 
 
    } 
 
}

//svg element 
 
<svg id="Layer_1" data-name="Layer 1" class=" bg-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
 
    <g id="Shape_1" data-name="Shape 1"> 
 
    <path class="cls-1" d="M.37,1.32V120.37C207.06,182.09,430.47,238,587.2,247.54c13.49.11,247.13,41.9,432.89-203.6q17.89-21.5,35.11-42.62Z" transform="translate(-30.37 -0.32)"></path> 
 
    </g> 
 
</svg>

出典

2016-12-10 VNOT

あなたは-moz- @使用を試みたのですか？ –

yes、bt not working .... – VNOT

'd'は現在のSVG標準（1.1）でCSSでスタイル設定できる属性ではありません。 SVG 2では*が許可されています。しかし、これまでのところ、Chromeだけがそれを実装しています。ランディの答えに従ってを使用する必要があります。 –

使用アニメイトタグ

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<svg id="Layer_1" data-name="Layer 1" class=" bg-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
 
    <g id="Shape_1" data-name="Shape 1"> 
 
    <path class="cls-1" transform="translate(-30.37 -0.32)"d="M.37,1.32V120.37C207.06,182.09,430.47,238,587.2,247.54c13.49.11,247.13,41.9,432.89-203.6q17.89-21.5,35.11-42.62Z" > 
 
     
 
     <!-- animate tag --> 
 
     <animate attributeType="XML" attributeName="d" from="M.37,1.32V120.37C207.06,182.09,430.47,238,587.2,247.54c13.49.11,247.13,41.9,432.89-203.6q17.89-21.5,35.11-42.62Z" to="M.37,1.32V120.37C207.08,082.09,330.47,238,587.2,47.54c13.49.11,247.13,41.9,432.89-203.6q17.89-21.5,35.11-42.62Z" 
 
     dur="20s" repeatCount="indefinite"/> 
 
     
 
     <!-- animate tag END--> 
 

 
    </path> 
 
    </g> 
 
</svg>

出典

2016-12-10 05:13:34

最初のトランジションサイクルの後にsvgが突然初期パスに戻り、btが初期化パスに戻る間にアニメーションが必要になります@RANDY – VNOT

属性は最初の値を最終値に戻し、アニメーションで元の値に戻したい場合は – VNOT

このガイドでsvgアニメーションを確認してください---> https://css-tricks.com/guide-svg-animations-smil/ –

jqueryでsvgパスをアニメーション化する方法

答えて

使用アニメイトタグ

関連する問題