Conver SVGアニメーション（ポイント）をCSSに

-2

私はSVGアニメーションを使用していますが、うまく動作します。それはあなたがブラウザを満たすためにCSSアニメーションにコードを変換するために私を助けてくださいすることができますので、Conver SVGアニメーション（ポイント）をCSSに

SVG's SMIL animations (<animate>, <set>, etc.) are deprecated and will be removed. Please use CSS animations or Web animations instead.

：しかし、私丁目（バージョン51.0.2704.103 m）がいることを伝えます

<svg viewBox="0 0 194.6 185.1"> 
    <polygon fill="#FFD41D" points="97.3,0 127.4,60.9 194.6,70.7 145.9,118.1 157.4,185.1 97.3,153.5 37.2,185.1 48.6,118.1 0,70.7 67.2,60.9"> 
    <animate id="animation-to-check" begin="indefinite" fill="freeze" attributeName="points" dur="500ms" to="110,58.2 147.3,0 192.1,29 141.7,105.1 118.7,139.8 88.8,185.1 46.1,156.5 0,125 23.5,86.6 71.1,116.7"/> 
    </polygon> 
</svg>

これはどのようにI

document.getElementById("animation-to-check").beginElement();

JS fiddle playground

：コードを起動します

ありがとうございます。

出典

2016-07-07 Tomas Randus

ポリフィルの例ではたくさんの例があります。https://github.com/ericwilligers/svg-animation/blob/master/test/testcases/append-target.html –

私はライブラリの経験はありません、私はこれをネイティブに持っているFirefoxを使用/開発します。 Chromeがネイティブサポートを提供しなくなったとき、彼らはこのライブラリがネイティブサポートの欠如の代わりに開発されたと発表しました。 –

@Tomas。これはpolyfillライブラリです。これは、ページやSVGに含めることだけです。それはあなたのために残りの世話をします。 –

これは、SVG-Morpheus libraryの助けを借りてかなり簡単に達成できます。以下のスニペットは、1つのSVGポリゴンから別のSVGポリゴンへのモーフィングトランジションのアニメーション化にどのように使用できるかを示しています。スニペットを自分で編集したい場合は、codepen sandbox for itも作成しました。

const icons = new SVGMorpheus('#icons'); 
 
icons.to('check', { 
 
    duration: 500, 
 
    easing: 'quad-in-out', 
 
    rotation: 'none' 
 
});

body { 
 
    width: 300px; 
 
} 
 
g { 
 
    fill: #FFD41D; 
 
}

<body> 
 
    <script src="//cdnjs.cloudflare.com/ajax/libs/SVG-Morpheus/0.3.2/svg-morpheus.js"></script> 
 
    <svg id="icons" viewBox="0 0 194.6 185.1"> 
 
    <g id="check"> 
 
     <polygon points="110,58.2 147.3,0 192.1,29 141.7,105.1 118.7,139.8 88.8,185.1 46.1,156.5 0,125 23.5,86.6 71.1,116.7"/> 
 
    </g> 
 
    <g id="star"> 
 
     <polygon points="97.3,0 127.4,60.9 194.6,70.7 145.9,118.1 157.4,185.1 97.3,153.5 37.2,185.1 48.6,118.1 0,70.7 67.2,60.9"/> 
 
    </g> 
 
    </svg> 
 
</body>

出典

2016-07-17 09:16:24 hootstheowl

ありがとうございました。それは誰かを助けることができますが、私はまだサードパーティのライブラリなしで純粋なソリューションが必要です。 –

JavaScriptを一度に使用することを避け、CSSを使用して目的の効果を達成したいですか？ – hootstheowl

私は外国の図書館を避け、SMILと同じようにJSによってCSS変換を開始したいと思っています –

Conver SVGアニメーション（ポイント）をCSSに

答えて

関連する問題