2

SVGファイルを（X）HTML5ドキュメントに埋め込むことができます。

<object data="anim.svg" id="svganim"/>

また

<img src="anim.svg" alt="embedded SVG"/>

ただし、anim.svgがアニメーション化されている場合は、ページが読み込まれるとすぐにアニメーションの再生が開始されます。

アニメーションが一時停止して開始するように、アニメーション化されたSVGファイルをどのように埋め込むことができますか？その後、ユーザーはボタンを押すことでアニメーションを再生できます（unpauseAnimations()Javascriptで使用）

エレガントでない方法

window.onload = function() {
    var svg_anim = document.getElementById('svganim').contentDocument.rootElement;
    svg_anim.pauseAnimations();
};

短所：埋め込まれたSVGが親ドキュメントとは異なるセキュリティコンテキストにある場合、これは機能しません。もっと良い方法はありますか？

4

1 に答える 1

5

これを解決する1つの方法は、svgファイルを変更してアニメーションが自動的に開始されないようにすることです（自動的に開始するアニメーションにbegin = "indefinite"を追加します）。beginElement()これらのアニメーションは、トリガーするアニメーション要素への呼び出しによってトリガーできます。そのような要素がたくさんある場合は、おそらく使いやすいでしょうpauseAnimations()。

ただし、<img>要素を使用すると、svg自体にイベントがフィードされないため、アニメーションを開始できません。そのため、そこでは機能しません。また、この場合もスクリプトが無効になっているため、その方法でアニメーションをトリガーまたは防止することもできません。

<object>、<embed>、または<iframe>を使用すると、提案のようにスクリプトを実行できます。svgファイルのsvgルート要素の最初の子の1つとしてスクリプトタグを追加し、その<script>要素でを呼び出すことができますpauseAnimations。しかし、あなたが提案したように、メインドキュメントからそれを行うこともできます。

于 2012-07-09T08:50:14.667 に答える