質問編集履歴

2 add tag

ssmxgo score 168

2019/01/25 18:09  投稿

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

JavaScript,jQuery,SVG初心者です

[こちらのサイト](http://gimmicklog.main.jp/jquery/408/)を参考に作ってみましたが、どうにも後にもうまく行かず。

svgが別ドメインにあると根本的に動かなそうだったのでHTMLとSVGの所在は同一ドメイン上になります。

[参考SVGファイル](http://gimmicklog.main.jp/demo/svg-jQuery/panda.svg)

```html

<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で操作なども出来ないです。

```javascript

document.getElementById('svg_map').contentDocument;

```

と

```javascript

svg_map = document.getElementById('svg_map');

svg_map.contentDocument;

```

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

また、

```javascript

$(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を取得することが出来ません

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

JavaScript 28757 questions JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。 Myタグに追加 HTML 17691 questions HTMLとは、ウェブ上の文書を記述･作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像･リスト･表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。 Myタグに追加 jQuery 11052 questions jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。 Myタグに追加 HTML5 7733 questions HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。 Myタグに追加

SVG 202 questions SVGは、XMLを基盤とした2Dベクター画像記述言語。画像を線・面といった図形の集合体として扱うベクター画像のため、環境に適した表示が可能です。アニメーション機能もサポートされており、簡単なインタラクティブコンテンツ作成もできます。 Myタグに追加

XML 981 questions XMLは仕様の1つで、マークアップ言語群を構築するために使われています。 Myタグに追加

1 domain名の修正

ssmxgo score 168

2019/01/25 15:32  投稿

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

JavaScript,jQuery,SVG初心者です

[こちらのサイト](http://gimmicklog.main.jp/jquery/408/)を参考に作ってみましたが、どうにも後にもうまく行かず。

svgが別ドメインにあると根本的に動かなそうだったのでHTMLとSVGの所在は同一ドメイン上になります。

[参考SVGファイル](http://gimmicklog.main.jp/demo/svg-jQuery/panda.svg)

```html

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

<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://domain.com/panda.svg`

`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で操作なども出来ないです。

```javascript

document.getElementById('svg_map').contentDocument;

```

と

```javascript

svg_map = document.getElementById('svg_map');

svg_map.contentDocument;

```

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

また、

```javascript

$(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を取得することが出来ません

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

JavaScript 28757 questions JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。 Myタグに追加 HTML 17691 questions HTMLとは、ウェブ上の文書を記述･作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像･リスト･表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。 Myタグに追加 jQuery 11052 questions jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。 Myタグに追加 HTML5 7733 questions HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。 Myタグに追加 SVG 202 questions SVGは、XMLを基盤とした2Dベクター画像記述言語。画像を線・面といった図形の集合体として扱うベクター画像のため、環境に適した表示が可能です。アニメーション機能もサポートされており、簡単なインタラクティブコンテンツ作成もできます。 Myタグに追加