web-dev-qa-db-ja.com

埋め込みSVGドキュメントがHTMLページに読み込まれているかどうかを確認するにはどうすればよいですか？

HTMLページに埋め込まれたSVGドキュメントを（JavaScriptを使用して）編集する必要があります。

SVGが読み込まれると、SVGとその要素のdomにアクセスできます。しかし、SVG domの準備ができているかどうかはわかりません。そのため、htmlページが読み込まれたときにSVGでデフォルトのアクションを実行できません。

SVG domにアクセスするには、次のコードを使用します。

var svg = document.getElementById("chart").getSVGDocument();

ここで、「chart」は埋め込み要素のIDです。

HTMLドキュメントの準備ができているときにSVGにアクセスしようとすると、次のようになります。

jQuery(document).ready( function() {
var svg = document.getElementById("chart").getSVGDocument();
...

svgは常にnullです。 nullでないことを知るだけで、操作を開始できます。それを行う方法があるかどうか知っていますか？

javascriptjquerydomsvg
36
alexmeia

メインドキュメントの埋め込み要素（「embed」、「object」、「iframe」など）に、関数を呼び出すonload属性を追加するか、スクリプトにイベントリスナーを追加します（例：embeddingElm.addEventListener('load', callbackFunction, false) ]。別のオプションは、DOMContentLoadedをリッスンすることかもしれませんが、それは何をしたいかによって異なります。

メインドキュメントにロードリスナーを追加することもできます。 jQuery(document).readyは、すべてのリソースが読み込まれることを意味するのではなく、ドキュメント自体にアクションの準備ができているDOMがあることを意味します。ただし、ドキュメント全体のロードをリッスンすると、そのドキュメントのすべてのリソース（css、javascriptなど）がロードされるまで、コールバック関数は呼び出されません。

ただし、インラインsvgを使用する場合、jQuery(document).readyは問題なく機能します。

さらに、embeddingElm.getSVGDocument()の代わりにembeddingElm.contentDocument（使用可能な場合）の使用を検討することもできます。

22
Erik Dahlström

チェックにはonloadイベントを使用できます。

some.svgがオブジェクトタグに埋め込まれているとします：

<body>    
<object id="svgholder" data="some.svg" type="image/svg+xml"></object>
</body>

jquery

var svgholder = $('body').find("object#svgholder");

svgholder.load("image/svg+xml", function() {
    alert("some svg loaded");
});

javascript

var svgholder = document.getElementById("svgholder");

svgholder.onload = function() {
    alert("some svg loaded");
}
12
Roshan Poudyal

SVGが<embed> 鬼ごっこ：

<embed id="embedded-image" src="image.svg" type="image/svg+xml" />

SVG画像は基本的に、メインloadのイベントとは別のdocumentイベントを持つサブドキュメントにあります。ただし、このイベントをリッスンして処理することができます。

var embed = document.getElementById("embedded-image");
embed.addEventListener('load', function()
{
    var svg = embed.getSVGDocument();
    // Operate upon the SVG DOM here
});

これはポーリングよりも優れています。SVGに加えた変更は最初にペイントされる前に行われるため、ちらつきやCPUによるペイントの労力が軽減されるためです。

8
Drew Noakes

埋め込み要素（オブジェクトなど）の読み込みイベントが私の好みですが、それが何らかの理由で実行可能な解決策でない場合、SVG DOMの準備ができていることがわかった唯一の一般的で信頼できるテストは、SVGのgetCurrentTimeメソッドですルート要素：

var element = document.getElementById( 'elementId' );
var svgDoc = element.contentDocument;
var svgRoot = svgDoc ? svgDoc.rootElement : null;

if ( svgRoot
    && svgRoot.getCurrentTime
    && ( svgRoot.getCurrentTime() > 0 ))
{
    /* SVG DOM ready */
}

W3C SVG推奨 は、SVGSVGElementのgetCurrentTimeを次のように述べています。

現在のSVGドキュメントフラグメントの開始時間を基準にした現在の時間を秒単位で返します。ドキュメントのタイムラインが始まる前にgetCurrentTimeが呼び出された場合（たとえば、ドキュメントのSVGLoadイベントが送出される前に「script」要素で実行されているスクリプトによって）、0が返されます。

3
Terence Bandoian

JQueryを使用すると、Erikが言及するウィンドウロードイベントにバインドできます。

$(window).load(function(){
    var svg = document.getElementById("chart").getSVGDocument();
});
2
Boermans

今後の参考のために、 Angular （8）/ TypeScript ソリューションは次のようになります。

_  @ViewChild('startimage', {static:false})
  private startimage: ElementRef;
...
  this.startimage.nativeElement.addEventListener('load', () => {
    alert('loaded');
  });
_

const svg = this.startimage.nativeElement.getSVGDocument();でsvgにアクセスできます

0
LosManos