オブジェクトとして読み込んだSVGファイルをjQueryで操作

Question

JavaScript,jQuery,SVG初心者です
こちらのサイトを参考に作ってみましたが、どうにも後にもうまく行かず。
svgが別ドメインにあると根本的に動かなそうだったのでHTMLとSVGの所在は同一ドメイン上になります。
参考SVGファイル

<object id="svg_map" data="https://example.com/panda.svg" type="image/svg+xml"></object>

<script>
	$(function(){
		var svg_map = document.getElementById('svg_map'); //.contentDocument,
		var $svg_map = $(svg_map.contentDocument); 
		console.log([svg_map, svg_map.contentDocument, $svg_map]);
	});
</script>

不慣れなChromeDeveloperツールをつかって原因を探ってみたところ

① svg_map
正しく読み込まれていると推測。
ツリーのcontentDocument配下には、
URL: https://example.com/panda.svg
contentType: "image/svg+xml"
doctype: <!DOCTYPE svg>
all: HTMLAllCollection(13) [svg, g#white, g, path, path, g#black, path, p...
などなど、いい感じでSVGの中身を取得出来ている模様。

ところが
② svg_map.contentDocument
URL: "about:blank"
contentType: "text/html"
doctype: null
all: HTMLAllCollection(3) [html, head, body]

③ $svg_map
親階層0:の下に②がぶら下がっている
0: document▶この下に②がぶら下がっている
length: 1
__proto__: Object(0)

という形になり、なぜか①と②が違う結果になってしまい
当然、ｊQueryで操作なども出来ないです。

document.getElementById('svg_map').contentDocument;

と

svg_map = document.getElementById('svg_map');
svg_map.contentDocument;

は意味が違うのでしょうか？

また、

$(function(){
	var svg_map = document.getElementById('svg_map').contentDocument;
	var $svg_map = $(svg_map); 
	console.log([svg_map, /*svg_map.contentDocument,*/ $svg_map]);
});

としても$svg_mapはSVGを取得することが出来ません

おわかりになりましたらご教授お願い致します。

Comments

[m.ts10806]

domain.comは実在のサイトです。
ご自身のものでないのでしたら例示ドメインを利用してください。
https://ja.wikipedia.org/wiki/Example.com

Answer 1

原因が判明しました。
タイミングの問題だった模様…

$(function(){…

↓

$(window).on('load', function() {…

ご閲覧、ご検証いただきました皆様、ありがとうございました。