質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.51%
SVG

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

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

Q&A

解決済

1回答

403閲覧

SVGファイル内からdatatables.min.jsを呼び出し

nanana71

総合スコア8

SVG

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

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

1グッド

1クリップ

投稿2018/04/20 08:50

実現したいこと

SVGファイル内で<foreignObject>を使用し<table>を記述。

<table>にdatatables([https://www.datatables.net/](https://www.datatables.net/))を適用させデータグリッドを表示させたいのですが、 以下のエラーが発生しています。 SVG内からdatatables.min.jsを読み込むことはできないのでしょうか?

発生している問題・エラーメッセージ

Uncaught TypeError: Cannot set property 'cssText' of undefined jQuery.Deferred exception: $(...).DataTable is not a function TypeError: $(...).DataTable is not a function Uncaught TypeError: $(...).DataTable is not a function

該当のソースコード

---------------- test.svg ---------------- <?xml version="1.0" encoding="utf-8"?> <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <style> <![CDATA[ @import url(https://cdn.datatables.net/t/bs-3.3.6/jqc-1.12.0,dt-1.10.11/datatables.min.css); ]]> </style> <foreignObject width="80%" height="80%"> <html xmlns="http://www.w3.org/1999/xhtml"> <body xmlns="http://www.w3.org/1999/xhtml"> <table id="foo-table" class="table table-bordered"> <thead> <tr><th>No</th><th>くだもの</th></tr> </thead> <tbody> <tr><td>1</td><td>りんご</td></tr> <tr><td>2</td><td>みかん</td></tr> <tr><td>3</td><td>ぶどう</td></tr> </tbody> </table> </body> </html> </foreignObject> <script xlink:href="https://code.jquery.com/jquery-3.3.1.min.js" /> <script xlink:href="https://cdn.datatables.net/t/bs-3.3.6/jqc-1.12.0,dt-1.10.11/datatables.min.js" /> <script type="text/javascript"> /* <![CDATA[ */ jQuery(function($){ $("#foo-table").DataTable(); }); /* ]]> */ </script> </svg>

試したこと

HTML上に直接記述した場合、動作することは確認済み。

defghi1977👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

jQueryはwindow.documentHTMLDocumentオブジェクトであると仮定して動作するため, SVGDocumentベースの環境(つまりSVG文書)では正しく動作しません.

代替案としてはforeignObject要素配下にjQueryを用いた通常のHTMLページを表示するiframe要素を仕込んでおくのは如何でしょうか?


一度不可能と啖呵を切ってしまった手前, いろいろ考えた結果iframeの中身をdocument.writeで動的に書き換えるようにすれば何とかなるかもしれません.

※とは言え動作は不安定ですから動作検証は慎重に行なって下さい.
(うろ覚えですが, ふとしたタイミングでiframeの中身が真っ白となるかもしれません)

XML

1<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 2 <metadata id="source"><![CDATA[ 3<!DOCTYPE html> 4<html lang="ja"> 5<head> 6<meta charset="UTF-8"> 7<link rel="stylesheet" href="https://cdn.datatables.net/t/bs-3.3.6/jqc-1.12.0,dt-1.10.11/datatables.min.css"/> 8<script src="https://cdn.datatables.net/t/bs-3.3.6/jqc-1.12.0,dt-1.10.11/datatables.min.js"></script> 9<script> 10jQuery(function($){ 11$("#foo-table").DataTable(); 12}); 13</script> 14<title></title> 15</head> 16<body> 17<table id="foo-table" class="table table-bordered"> 18<thead> 19<tr><th>No</th><th>くだもの</th></tr> 20</thead> 21<tbody> 22<tr><td>1</td><td>りんご</td></tr> 23<tr><td>2</td><td>みかん</td></tr> 24<tr><td>3</td><td>ぶどう</td></tr> 25</tbody> 26</table> 27</body> 28</html> 29 ]]></metadata> 30 <foreignObject width="80%" height="80%"> 31 <html xmlns="http://www.w3.org/1999/xhtml"> 32 <body xmlns="http://www.w3.org/1999/xhtml"> 33 <iframe id="iframe" width="100%" height="100%" style="border:none;"></iframe> 34 </body> 35 </html> 36 </foreignObject> 37 <script><![CDATA[ 38{ 39 const html = document.querySelector("#source"); 40 const iframe = document.querySelector("#iframe"); 41 const doc = iframe.contentDocument; 42 doc.open(); 43 doc.write(document.querySelector("#source").textContent); 44 doc.close(); 45} 46 ]]></script> 47</svg> 48

投稿2018/04/20 08:59

編集2018/04/20 10:02
defghi1977

総合スコア4756

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

nanana71

2018/04/20 09:27

jQueryについての情報、代替案のご提示ありがとうございます! 提示して頂いた代替案で、希望する動作を確認することができました。 しかし今回はSVG1ファイルのみで処理を完結させるという制約があり、 別ファイル(table.html)を読み込ませる代替案を残念ながら使用することができません。 こちらの案は別の機会にて使用させて頂きたいと思います。 -------------- test.svg -------------- <svg xmlns="http://www.w3.org/2000/svg"> <foreignObject width="80%" height="80%"> <body xmlns="http://www.w3.org/1999/xhtml"> <iframe src="table.html" style="width:500px;height:500px"></iframe> </body> </foreignObject> </svg> -------------- table.html -------------- <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="https://cdn.datatables.net/t/bs-3.3.6/jqc-1.12.0,dt-1.10.11/datatables.min.css"/> <script src="https://cdn.datatables.net/t/bs-3.3.6/jqc-1.12.0,dt-1.10.11/datatables.min.js"></script> <script> jQuery(function($){ $("#foo-table").DataTable(); }); </script> <title></title> </head> <body> <table id="foo-table" class="table table-bordered"> <thead> <tr><th>No</th><th>くだもの</th></tr> </thead> <tbody> <tr><td>1</td><td>りんご</td></tr> <tr><td>2</td><td>みかん</td></tr> <tr><td>3</td><td>ぶどう</td></tr> </tbody> </table> </body> </html>
defghi1977

2018/04/20 09:30

であれば残念ながら不可能です. 諦めて下さい. とは言えHTMLをベースとしてインラインSVGに動的にHTMLを埋め込む方法はあります.
nanana71

2018/04/23 07:38

再度ご回答頂き、ありがとうございます。 ご提示頂いた方法でこちらも動作確認させて頂きました。 試した限りでは問題なく表示されておりましたが、もう少し検証を重ねたいと思います。 無理難題を申し上げる中、検討を重ねて頂きありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.51%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問