私は現在、ユーザーが JavaScript ファイルを SVG ドキュメント内に埋め込んで、コンテンツのパンとズームを有効にするスクリプトに取り組んでいます。私は SVG のパンとズームのほぼすべてのバリエーションを見つけて試しましたが、クロスブラウザーを一貫してサポートするものだけを見つけました。残念ながら、このスクリプトは、SVG が object タグを介して埋め込まれるのではなく、HTML に書き出されることを前提として書かれています。私はかなりの数の事前レンダリングされた SVG を扱っているので、各 SVG で外部 JavaScript ファイルにリンクするだけの方が効率的です。これまでのところ、変換はすべて順調に進んでいますが、少し問題が発生しました。このスクリプトは、SVG オブジェクトをラップする div にヒットするマウス イベントに依存しています。次のようになります。
<div id="svgwindow">
<div id="wrapper">
<object id="svg" data="test.svg" type="image/svg+xml"></object>
</div>
</div>
JavaScript の例:
parent.document.getElementById("svgwindow").addEventListener("mousewheel", Zoom, false);
このスクリプトは、svg オブジェクトが設定されていない svgwindow の領域でイベントが発生する限り、イベントを正常に追加します。イベントがオブジェクトの上で発生するとすぐに、イベントはキャプチャされません。エラーのトラブルシューティングに役立つ同様のインスタンスを見つけることができなかったので、何か助けていただければ幸いです。