Q&A
提示されたコードに齟齬があるように見受けられます. <svg id="frame"></svg>なのか<div id="frame">なのか整理して下さい.
jquery でsvgを操作する方法で悩んでおります
どなたかわかる方いたら教えて下さい
やりたいこととは
jqueryを使用して非同期で読み込んだsvgデータを
以下のsvgタグの中に配置するというものです
html
1<svg id="frame"></svg>
そして非同期で取得できるsvg要素は以下の通りです
svg
1<svg> 2 <circle fill="#000001" cx="144" cy="144" r="144"/> 3</svg>
ここで私が試したのは
jqueryで以下のような処理なんですが
jquery
1$("#frame").load("http://hogehoge/svg_data.php", function(){ 2});
これだと以下のようにsvgタグの中に取得したsvgデータを読み込んでしまうため
svgが入れ子になってしまいます
<svg id="frame"> <svg> <circle fill="#000001" cx="144" cy="144" r="144"/> </svg> </svg>
ですので以下の内容でご回答頂ければと思います
①svgが入れ子にならないようにsvg要素を追加する方法を教えて下さい
②上記の方法では連続して複数の要素を追加することができないので
各要素をグループ化して個別に追加する方法を教えて下さい
以上です。どうぞ宜しくお願い致します
ご指摘いただきましてありがとうございました。修正させて頂きました。
svg要素にはviewBox、width等の属性があるため流用しないほうがいいと思うのですが、入れ替えてはだめなのでしょうか？
回答1件
0
svg要素にSVG構造を問題なく注入できているのであれば, 読み込むSVGコード側を編集してしまうのも手です.
つまりPHP側で生成するHTMLコード(SVG文書片)を
HTML
1<!--SVG※--> 2<svg> 3 <circle fill="#000001" cx="144" cy="144" r="144"/> 4</svg>
ではなく
HTML
1<!--SVG--> 2<!--svg要素を省略してしまう--> 3 <circle fill="#000001" cx="144" cy="144" r="144"/>
としjQueryで読み込むようにすればよいでしょう.
「PHP側を編集できない」条件下であれば挿入するノードに条件をつければよいでしょう.
※実際の動作は試していません(間違っているかもしれません).
JavaScript
1//jQuery 2$("#frame").load("http://hogehoge/svg_data.php :root>*");
NOTE:
質問者コメントによれば上記セレクタでは動作せず, 別のセレクタを記述をする必要があるとのことです.
（セレクタの記述が正しければ動作する）
参考
http://api.jquery.com/load/
たとえば以下の処理をコピーして複数実行しても
svgタグに追加されるのは1つのみとなってしまうようです
JavaScript
1$("#frame").load("http://hogehoge/svg_data.php", function(){ 2});
複数追加されるようにしたいのですがどうしたらいいでしょうか？
（画面上だと重なってしまうためchromeのdevelopertoolで確認する必要があります）
jQuery.loadメソッドは内部でjQuery.htmlメソッドを呼んでいます. つまり単一のノードに対してloadメソッドを実行するとその都度当該ノードのinnerHTMLプロパティを上書きしていることとなるため, 見た目上「svgタグに追加されるのは1つのみ」となります.
https://github.com/jquery/jquery/blob/master/src/ajax/load.js
従って, 複数のSVGコードを単一のsvg要素に挿入するのであれば次の二つの対処策が考えられます.
jQuery.ajaxメソッドを用いてSVGコードを取得し, 自分でsvg要素にSVGコードを(上書きではなく)追加する.
この場合, 得られたコードからルートのsvg要素を除去するなどの処理が必要となるでしょう.
- SVGを読み込む専用のノードを用意し,
jQuery.loadメソッドで入手したSVGツリーを#frameノードに移動する.
loadメソッドは第3引数にコールバック関数を受け付けるので, ここにノードの移動処理を記述すればよいでしょう.
投稿2018/01/06 08:09
編集2018/01/06 13:36総合スコア4756
ご返信ありがとうございます。
ただ、こちらからはサーバ側を触れないのでそちらの方法では無理そうです
回答を求める上での条件はできればコメントではなく質問の内容に追記して下さい.
ありがとうございます
「:root>*」ではうまくいきませんでしたが 「svg>g」でいけました
また、お手数おかけしますが②についてもご回答いただけると助かります
svgタグ配下に要素が複数追加できるようにしたいです
>svgタグ配下に要素が複数追加
の意味が読み取れません. どのような出力結果が必要なのかについて質問を詳細化して下さい.
なお, 単一の記事に複数の質問を押し込むと回答する側の焦点がどうしてもぼけてしまうため, できれば別の記事として質問を分離して下さい.
たとえば以下の処理をコピーして複数実行しても
svgタグに追加されるのは1つのみとなってしまうようです
$("#frame").load("http://hogehoge/svg_data.php", function(){
});
複数追加されるようにしたいのですがどうしたらいいでしょうか？
（画面上だと重なってしまうためchromeのdevelopertoolで確認する必要があります）
あと焦点がどうしてもぼけてしまうとはどういうことでしょうか？
同一の前提条件であっても2つの記事に分けて記載したほうがわかりやすいでしょうか？
>複数追加されるようにしたいのですがどうしたらいいでしょうか？
jQueryのソースを追ったところ, jQuery.loadメソッドでは内部でjQuery.htmlメソッドを呼んでいます. つまりloadメソッドを実行する都度, ノードの中身を上書きしているため一つのSVGコードしか挿入されないように見えるのです. これは既にSVGの問題ではなくjQueryの使い方の問題です.
従って、
「jQuery.load」メソッドを複数回呼び出して同じノードに異なるノードを挿入するには？
という別の問題と言えるでしょう.
>同一の前提条件であっても2つの記事に分けて記載したほうがわかりやすいでしょうか？
質問及び回答は「みんなのもの」なので, 一問一答が「理想」です.
なので、一つの問題が解決しそこから新たな問題が派生したのであれば、なるべく"別の記事としたほうが望まし"く, さもないと質問も回答もだらだらと判りにくいものとなってしまうでしょう.
>jQueryのソースを追ったところ, jQuery.loadメソッドでは内部でjQuery.htmlメソッドを呼んでいます. >つまりloadメソッドを実行する都度, ノードの中身を上書きしているため一つのSVGコードしか挿入され
>ないように見えるのです. これは既にSVGの問題ではなくjQueryの使い方の問題です.
はい、なので別の方法で実装する必要があるようですね
>質問及び回答は「みんなのもの」なので, 一問一答が「理想」です.
承知しました次回から気をつけさせて頂きます
返答内容を編集して頂きありがとうございます
ご回答頂いた内容についてですが
SVGコードを上書きではなく別の方法で追加する必要があるということは把握しております
また、jQuery.ajaxでの追加もこちらでも試してみましたがうまく行きませんでした
あと、loadメソッドは第3引数にコールバック関数の件も存じております
いろいろ試したうまく行かず、最終手段としてteratailへ質問させて頂きました
内容的にはわりと簡単な印象でしたが、解決方法がわからず大変困っております
もし解決方法などご存知でしたら教えていただけると助かります。
どうぞ宜しくお願い致します
> jQuery.ajaxでの追加もこちらでも試してみましたがうまく行きませんでした
私は別段jQueryに詳しいわけではありませんので, jQueryの使い方の問題として内容を整理し別記事として質問されたほうが専門家の方の目に止まりやすいかと思います.
※なおjQuery縛りがなければさほど難しい問題ではありません
ご指摘いただきましてありがとうございました
質問内容は表題の通り
「jqueryを使用してsvgを読み込みたい」というもので
jqueryにて動的にsvgを追加できるようにすることが目的でした
基本的にjqueryに理解が長けている方の回答を期待しておりましたが
そうでない方からも忌憚なくご意見が頂けて良かったです
しばらくはまた別の方のご意見が頂けるまで待ってみようかと思います
あなたの回答
tips
プレビュー
