1

index.html という名前の HTML ファイルがあり、そこには svg (object-tag を使用) と js-file (script-tag を使用) が含まれています。js 関数はすべて、HTML ファイル内で呼び出されると完全に機能します。ここで、svg ファイル内の js 関数の 1 つにアクセスしたい場合、svg ファイル内の js ファイルにリンクする必要があります (xlink を使用)。関数は svg ファイル内でも機能しますが、これらの関数が HTML ファイル内の任意の要素 (例: document.getElementById('div1')) を参照するとすぐに、機能しなくなります (私の推測: おそらく関数が機能しないためです)。 HTML 内の要素を探しますが、SVG ファイル内にあります)。これらの機能を再び機能させるにはどうすればよいですか?

4

3 に答える 3

1

トップまたは親オブジェクトを使用して、svg からコンテナー html に取得できます。コンテナ html への完全なsvg とコンテナ html から svg への完全な例があり、広範なコメントがここにあります。

于 2013-01-10T16:32:24.117 に答える
1

JS 関数を SVG に埋め込むと、関数は常に SVG のプライベート スコープで実行されるため、その外部にアクセスすることはできません。

動的な SVG を使用してインタラクティブな Web アプリケーションを作成する場合は、SVG を変更する JS 関数を HTML の JavaScript コードに配置する必要があります。.contentDocument要素のを取得することで、HTML に埋め込まれた JavaScript から SVG ドキュメント ツリーにアクセスできます<object>。

于 2013-01-10T15:44:19.300 に答える
1

最新のブラウザーでは、svg を HTML 内に直接配置するだけで、JS (および CSS) は両方でシームレスに機能します。

<div>
  <svg:svg xmlns:svg="www.w3.org/2000/svg" version="1.1" height="100" width="100" viewBox="0 0 100 100">
    <svg:circle id="circle" cx="50" x="50" y="50"/>
  </svg:svg>
</div>

<script>
    document.getElementById("circle").style.fill="red";
</script>
于 2013-01-10T16:56:58.877 に答える