質問編集履歴

2 add tag

ssmxgo

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)`
という形になり、なぜか①と②が違う結果になってしまい
当然、jQueryで操作なども出来ないです。
```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ブラウザのほとんどに搭載されています。

  • HTML

    17691 questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • jQuery

    11052 questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • HTML5

    7733 questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • SVG

    202 questions

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

  • XML

    981 questions

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

1 domain名の修正

ssmxgo

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)`
という形になり、なぜか①と②が違う結果になってしまい
当然、jQueryで操作なども出来ないです。
```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ブラウザのほとんどに搭載されています。

  • HTML

    17691 questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • jQuery

    11052 questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • HTML5

    7733 questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • SVG

    202 questions

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

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る