私はある経路から別の経路にモーフィングするSMILアニメーションを書きます。パスはInkscapeによって作成されます。 どちらの図形も17ノード(Inkscapeによる)から成っていますが、SMILアニメーションはうまくいきません。定義された1秒後、1つのパスからもう1つのパスに移動します。svgモーフィングSMILアニメーションはすぐにある状態から別の状態にジャンプします
<svg width="34" height="34" version="1.1" viewBox="0 0 34 34" style="margin:2px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
\t <path id="check" d="m 5,8.25 0,17.5 C 5,27 6.25,27 6.25,27 l 17.5,0 c 0,0 1.25,0 1.25,-1.25 L 25,8.25 C 25,7 23.75,7 23.75,7 L 12.976695,7 6.25,7 C 6.25,7 5,7 5,8.25 Z M 2.5,2 l 25,0 c 0,0 2.5,0 2.5,2.5 l 0,25 C 30,32 27.5,32 27.5,32 l -25,0 C 2.5,32 0,32 0,29.5 L 0,4.5 C 0,2 2.5,2 2.5,2 Z" id="boxUid">
\t \t \t <animate attributeName="d" to="m 5,18.1 0,0 7.5,8.9 0,0 12.5,-15.7 0,0 L 23.4,7 12.5,20.8 7,14.5 Z M 2.5,2 l 25,0 c 0,0 2.5,0 2.5,2.5 l 0,25 C 30,32 27.5,32 27.5,32 l -25,0 C 2.5,32 0,32 0,29.5 L 0,4.5 C 0,2 2.5,2 2.5,2 Z" dur="1s" fill="freeze" begin="check.mouseenter"/>
\t \t \t <animate attributeName="d" to="m 5,8.25 0,17.5 C 5,27 6.25,27 6.25,27 l 17.5,0 c 0,0 1.25,0 1.25,-1.25 L 25,8.25 C 25,7 23.75,7 23.75,7 L 12.976695,7 6.25,7 C 6.25,7 5,7 5,8.25 Z M 2.5,2 l 25,0 c 0,0 2.5,0 2.5,2.5 l 0,25 C 30,32 27.5,32 27.5,32 l -25,0 C 2.5,32 0,32 0,29.5 L 0,4.5 C 0,2 2.5,2 2.5,2 Z" dur="1s" fill="freeze" begin="check.mouseleave"/>
\t \t </path>
</svg>
は、残念ながら私は、ノードをカウントすることはできないんだけど、それはまた、Chromeで点滅(ただし、Firefoxで)ということに加えて(箱の境界線をホバー)。原則として、私はパス要素がどのように動作するのかを知っています。例えば。 MDNm dx dy
は、特定の位置に移動し、古いものに接続せずに新しいポイントを生成する移動コマンドです。しかし、m 5,18.1 0,0 7.5,8.9 0,0 12.5,-15.7 0,0
とはどういう意味ですか?
ブラウザが適切なアニメーションをしない理由は何ですか:ので17個のノードは、各形状であることを述べている私はInkscapeのを信頼しなければならない知識の見かけの不足の
?私は何を変えなければならないのですか?