問題タブ [smil]

純粋な SMIL でこの SVG 円グラフ アニメーションをどのように再現しますか? 複雑な JS を捨てて、アニメーションの合計時間を制御できるようにしたいと考えています。

http://jsfiddle.net/frank_o/gFnw9/19/

これまでのところ、これは私が得たすべてです：

http://jsfiddle.net/frank_o/46mH2/ (イアンに感謝)

しかし残念ながら：

• キャンバスから離れた場所に配置されています（または、最初から完全な円ではありませんでした）
• 12時ではなく9時スタート
• Snap.svg を使用します (外部ライブラリには依存しませんが、必要に応じて依存します)

HTML:

JS:

アップデート：

問題：

次のようにする必要があります。

この SVG SMIL パイ アニメーションの中心の何が問題なのか、誰にもわかりませんか?

http://jsfiddle.net/frank_o/fj7Xc/

次のように表示されます。

次のように表示されるはずですが、

HTML:

SVG SMIL アニメーションでホバー効果を作ろうとしています。mouseout: mouseover=scale+15%andopacity-50%マウスオーバーとマウスアウトの反転を修正する必要があります。私の敏感な四角形に別々の要素をマウスオーバーしている間、ジャンプしません。ありがとうございました

灰色の四角形にマウスオーバーすると、彼をスケーリングします

私はこのようないくつかの数字を追加しようとしています:

その後、この図形 (線、円、四角形) のいずれかの上にマウスを置き、灰色の四角形にとどまっている間に再びアニメーションを開始します。

図全体 (id="rectangl") にマウスを置いている間は拡大 (+15%) し、図全体からマウスを離したときだけ縮小 (-15%) する必要があります。

私の同様のテーマSVG animateTransform を使用して、ホバーのような効果を慎重にスケーリングします

理解していただきありがとうございます

HTML で開くテキスト:

ズームインしてこの長方形の上でマウスをスライドさせると、そのうちの誰かが半分の容量のままになります。マウスをゆっくりスライドさせた場合のように、理想的な状況を得るにはどうすれば修正できますか。たとえば、次のようなコードを FireFox で開きます。

MediaElement.js を使用して SMIL ファイルにラップされたビデオ ストリームを再生する方法を説明できる人はいますか?

JW Player はこれをサポートしていますが、MediaElement.js を使用してこれが可能かどうか興味があります。

3 回跳ね返って壁にぶつかって戻る円をアニメーション化する必要があります。指定されたパスをたどる必要があります。で試してみましたanimateMotion。今まではこんな感じで、

実際、私はこの分野に不慣れなため、次のようなことを期待しています。ガイダンスやサポートに感謝します。

SVG アニメーション モデルを Javascript カスタム処理とリンクすることはできますか? 具体的には、SVG アニメーションには、すべてのアニメーション要素を同期する内部クロックがあります。さらに、Javascript でアニメーションを行う方法は他にもあります (例: setTimeout、setInternval を使用)。SVG SMIL ではサポートされていないが、SVG アニメーション モデルと調和できるカスタム アニメーションを Javascript を使用して実行できるように、SVG アニメーションを Javascript コードとリンクする方法があるかどうか疑問に思います。

どんなアイデアでも大歓迎です。

乾杯、ブルース

IE で encodeURIComponent() 内の何かをアニメーション化しようとしています。SMIL が IE でサポートされていないことは知っていますが、純粋な JS を使用して svg タグをアニメーション化/回転するよりもはるかに簡単です。以下は、Firefox と Chrome では機能するが IE では機能しないものの例です。

FakeSmile への xlink:href は動的ではないため、問題なくアニメーションを処理できるはずだと思います。同様のフィドルを試してみると、タグ内で IE で動作することがわかります。

http://jsfiddle.net/FG3PG/1/

これは、jsfiddle 側のいくつかのメタ タグまたはその他の html コードのために機能しますか? それとも、私が含めたコードがencodeURIComponent()でラップされているという事実ですか? 最終的には、svg をラップする必要があります。そうしないと、アニメーションに関係なく、まったく表示されません。