svg ファイル内でスクリプトや対話機能が必要ない場合は、代わりに <img> タグを使用できます。

Robert Longson が言うように、マウス イベントは <object> タグに入るので、代わりにイベント ハンドラーを svg に配置する必要があります (スクリプトを使用してこれを行うことができ、元の svg ファイルを変更する必要はありません)。以下は、svg を参照する html から svg の DOM にアクセスする方法の例です。

明確にするために：

• ルート svg 要素を取得します (例を参照)
• 呼び出し(メインの html ドキュメント内のスクリプトで定義された関数であるとrootsvg.addEventListener("click", window.parent.yourFunctionHere, false)仮定します)yourFunctionHere

img タグを使用して、ドキュメント モデルを使用して SVG を編集できます。必要なのは少し考えるだけです。私は同様の問題に取り組んでおり、svg テキストを編集可能にする必要があるため、編集を有効にするためにマウスクリックが必要でした。

SVG をクリック可能にしたい場合、object タグは適していません。すべてのイベントをそのコンテンツに再ルーティングします。その上に透明な div を配置することはできません。オブジェクトが自動的に一番上の項目になるため、埋め込むオブジェクトは常にマウス イベントを受け取ることができます。（フラッシュビデオプレーヤーを考えてください）。

できることは、XMLSerializer と createObjectURL を使用して svgs を blob に変換することです。これは、次を使用して img タグとして表示できます。ここで、 mysvg は、ロードされ、xhttp を使用して xml ドキュメントとして解析された SVG です。

     var mysvg = xhttp.responseXML;
     var xml2str = new XMLSerializer();
     var svg_blob = new Blob([xml2str.serializeToString(mysvg)],{'type': "image/svg+xml"});
     var url = URL.createObjectURL(svg_blob);
     document.getElementById("svg1").src = url;

svg1 は img タグであり、使用したいイベント ハンドラーを喜んで受け取ります。

マウス イベントは<object>タグのコンテンツに移動します。

<div>タグの前に絶対位置透明のような他のタグを配置<object>し、それを使用してマウス イベントをキャッチする必要があります。

または、タグのコンテンツを<object>pointer-events="none" に設定して、イベントを処理しないようにすることもできます。その時点で、<object>タグでイベントを処理できます。