• 締切済み

外部SVGの参照

<object>タグで呼び出したsvgファイルをjavascriptで操作したいとおもい色々調べました。 外部SVGファイルの呼び出しにはgetSVGDocument()を使うらしいのですが、 動きませんでした。 単純に svgObj=document.getElementById("logo").getSVGDocument(); svgObj.getElementById("baseCr").setAttribute("fill", "white"); としただけなのですが、何か間違ってますでしょうか。 ブラウザはFirefox3.0.7です。 他に方法がありましたら、教えて頂きたいです。 個人的に使用するだけで、Webにアップするつもりも無いのでブラウザに依存した方法でも構いません。 よろしくお願いいたします。

みんなの回答

  • askaaska
  • ベストアンサー率35% (1455/4149)
回答No.1

JavaScriptの記述的には なんら間違っていないわね。 後考えられるのは ・SVGのプラグインが入っていない。 ・実行タイミング が思いつくわ。 ・SVGのプラグインが入っていない。 　→入っていないとgetSVGDocumentが使えないから。 ・実行タイミング 　→SVGがロードされる前には実行できないわ。 与えられた情報から見えたのはこんなトコかな。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • 外部SVGファイルを指定時のJavaScript

    外部SVGファイルを指定している場合のJavaScriptの書き方 はじめまして。SVGを勉強中のとりがらと申します。 以下のような構成でHTML・SVGを作成しています。 （添付した図の通りです） 　　【XXX.html】 　　・embedタグでroot.svgを埋め込み。 　　【root.svg】 　　・ellipseオブジェクト 　　・useタグのchild.svgオブジェクト1 　　・useタグのchild.svgオブジェクト2 　　【child.svg】 　　・circleオブジェクト 　　・rectオブジェクト このような場合、XXX.htmlに記述したJavaScriptにて、 『root.svg』内『useタグのchildオブジェクト1』の『rectオブジェクト』の色 を変えたいと考えております。 そこで、XXX.htmlに下記のようなJavaScriptを書いたのですが、 child.svg内の四角の要素を取得する時点で、エラーが発生してしまいました。 > svgSub2.getElementById is not a function このような場合、どのようにJavaScriptを書けばよいのでしょうか？ SVGの記述の方がおかしいのでしょうか？ どなたか解決策のご教示の程、よろしくお願いいたします。 +============================== + 環境 +------------------------------ ・WindowsXP ・Firefox 19.0 +============================== + 呼び出しhtml +------------------------------ <!DOCTYPE HTML> <html> <head> 　　<script language="javascript" type="text/javascript"> 　　　　function OnButtonClick(){ 　　　　　　<!-- Root.svg内の楕円の色変更(OK) --> 　　　　　　var svgdocMain = document.getElementById("idRoot").getSVGDocument(); 　　　　　　var svgMainDaen = svgdocMain.getElementById("idRootObj0"); 　　　　　　svgMainDaen.setAttribute("fill", "#00FFFF"); 　　　　　　<!-- Child.svgオブジェクト1を非表示(OK) --> 　　　　　　var svgSub1 = svgdocMain.getElementById("idRootObj1"); 　　　　　　svgSub1.setAttribute("display", "none"); 　　　　　　<!-- Child.svgオブジェクト2内の四角の色変更(NG) --> 　　　　　　var svgSub2 = svgdocMain.getElementById("idRootObj2"); 　　　　　　var svgSubRect = svgSub2.getElementById("idChildObj1");　<!--←エラー発生--> 　　　　　 svgSubRect.setAttribute("fill", "#FFFFCC"); 　　　　} 　　</script> </head> <body> 　　<form><input type="button" value="テスト" onclick="OnButtonClick();"/></form> 　　<embed id="idRoot" type="image/svg+xml" src="root.svg" /> </body> </html> +============================== + root.svg +------------------------------ <?xml version="1.0" encoding="utf-8"?> <!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" 　　y="0px" width="800px" height="800px" viewBox="0 0 800 800" enable-background="new 0 0 800 800" xml:space="preserve" 　　id="svg_root" > 　　<!-- 1.ROOT楕円 --> 　　<ellipse fill="#00FF00" cx="20" cy="40" rx="15" ry="25" id="idRootObj0"> 　　</ellipse> 　　<!-- 2.Child.svg1 --> 　　<use xlink:href="child.svg#svg_child_g" x="0" y="100" id="idRootObj1" /> 　　<!-- 3.Child.svg2 --> 　　<use xlink:href="child.svg#svg_child_g" x="0" y="200" id="idRootObj2" /> </svg> +============================== + child.svg +------------------------------ <?xml version="1.0" encoding="utf-8"?> <!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="200px" 　　height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve" 　　id="svg_child"> 　　<g id="svg_child_g"> 　　　　<!-- 1.CHILD四角 --> 　　　　<rect fill="#FF00FF" x="50" y="50" width="40" height="40" id="idChildObj1"> 　　　　</rect> 　　　　<!-- 2.CHILD円 --> 　　　　<circle fill="#00FF00" cx="50" cy="100" r="26.5" id="idChildObj2"> 　　　　</circle> 　　</g> </svg>

    • ベストアンサー
    • HTML
  • SVG画像内に複数のSVGファイルを外から読み込む

    SVG画像内に複数のSVGファイルを外部から読み込みたい ＃実現したいこと ゲーム画面に　野球のボールや、走者アイコンなどのSVG画像を ローカルファイルとして動的に javascript で取り込んで 大きな１枚のSVG画像を作成したい ＃分からないこと <defs> などを用いて外部画像を読み込もうとしても、複数のファイルを取り込んでもらえない <image> タグとして外部からSVG画像を javascript で読み込もうとして element.href.baseVal = url ...　--->　local path/(svg file name).svg と設定しても、何も描画されない error message も出ないまま、空白の画面だけが残されてしまう ＃疑問点 setAttribute のような方法で、ローカルファイルを　SVG画面に読み込ませる javascript 構文が知りたい

  • SVGの表示

    SVGをブラウザで表示するときにHTMLタグ内に <EMBED src"sanple.svg"> という方法でしか表示できないのでしょうか？ 例えば、htmlコードにembedという形ではなく直接SVGコードを書いて表示できないものなのでしょうか？ できればcgiやjsp等を使用して動的にsvg表示させたいのですが、なにか方法はありますでしょうか？ よろしくお願いします。

    • ベストアンサー
    • XML
  • SVGについて

    HTML上でベクトル画像を表示する方法ということでSVGを見つけたのですが、その概要についてお聞きしたいと思います。例えばどれだけのブラウザがサポートしているのか、表示・製作するために特別なプラグインなどが必要ななのか、現在の普及度・・・などです。 最初はVMLを見つけて「いい！」と思ったのですが、ブラウザがIE5.5以上と非常に限定的なのがネックでした。その点SVGならかなり普及している、という情報だけ手に入ったのですが、その先が分かりません。皆様からの情報を募りたいと思います。 先に言ったようにブラウザが限定的だったり、表示にプラグインが必要なのは困ります。JavaScriptのようにほとんどのブラウザがサポートし、かつプラグイン不要で動作して欲しいのです。もしSVGがこれを満たし得ない場合、代わりとなる言語がありましたらそちらも情報をいただけると幸いです。 よろしくお願いします。

    • 締切済み
    • XML
  • ＸＨＴＭＬでのＶＭＬとＳＶＧの使い分けについて

    お世話になります。 今まで、ＨＴＭＬのＣａｎｖａｓタグを使って、ＨＰにグラフィック描画をしてきました。 ＩＥでは、Ｃａｎｖａｓがそのまま使えませんでしたので、ＥｘＣａｎｖａｓ．ｊｓ　を使って描画をしてきました。 最近、このＥｘＣａｎｖａｓ．ｊｓは、ＶＭＬを使って描画を実現している事を知りました。 さらに、最近では、標準化されたＳＶＧというＷ３Ｃの規格がある事を知りました。 ＳＶＧにより動的にＪａｖａＳｃｒｉｐｔ等で描画するサンプルが色んなＨＰに出ていましたので試してみましたが、ＩＥ８では、基本的には機能しませんでした。 「基本的には機能しなかった」というのは、Ａｄｏｂｅ等のプラグインをインストールするとＩＥ８でも問題無く、機能するようになりましたので、その様に書かせていただきました。 ただ、プラグインをインストールする事を、ＨＰを見ていただく多数の人にしていただく事はできませんので、他の方法が必要かと思っております。 一方、ＶＭＬも幾つかのＨＰでサンプルがありましたので、試してみたところ、ＩＥ８とＦｉｒｅｆｏｘでは、機能しましたが、ＯｐｅｒａやＣｒｏｍｅでは、機能しませんでした。 いろんなＨＰの解説でも、ＶＭＬは、ＩＥのみで可能な機能で、ＳＶＧは、ＩＥではネイティブにはサポートされていないと言う様な事が書かれていました。 つきましては、次の２点について、ご教示いただきたいと思い、質問させていただきました。 （１）　ＩＥでは、ＶＭＬをその他のブラウザではＳＶＧを使うように切り替えて機能を実現しようと考えておりますが、その様な考え方でよいでしょうか？ （２）　今後の流れとして、ＳＶＧは、やはりｘｍｌファイルで実現される描画ファイルのフォーマットということで、ＩＥを含めた全てのブラウザで動的に扱える機能にはならないのでしょうか？ これから、どの様に進めていこうかと、思案している次第です。 どうぞ、ご教示いただければと思います。 よろしくお願いします。

    • ベストアンサー
    • HTML
  • SVGを直接HTML文章の中タグのように書き込む

    SVGを直接HTML文章の中タグのように書き込むことはできるのでしょうか？.svgファイルを読み込んできて表示することはできるのですが、この方法だと動的に図を作成することができません。何か良い方法があったら教えてください。

    • 締切済み
    • XML
  • SVGをobjectタグで埋め込み・表示させる方法

    いつもお世話になっております。 HTMLにobjectタブを使いSVGファイルを埋め込み・表示させようとしていますが、 表示させることができません。 SVGファイル自体は正しく表示されます。 （ブラウザはIE9　Betaです） 過去にいくつか類似投稿がありましたの参考にしましたが、今一つ分かりません。 以下コードになりますが、記述が誤っている・足りない箇所がありましたら、ご指摘ください。 よろしくお願いします。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8"></meta> </head> <body> <div> <object width="200" height="40" data="sample.svg" type="image/svg+xml"> SVG表示失敗 </object> </div> </body> </html>

    • ベストアンサー
    • HTML
  • phpファイルでsvgを出力する方法

    a.phpファイルにsvgを記述し、htmlファイルからimgタグで読み込む方法

    • ベストアンサー
    • PHP
  • embedタグでFirefox右クリック禁止

    ホームページで動画配信しています。 objectタグだけでは読み込めないブラウザがあるためembedタグを挟み込んでどのブラウザでも読み込めるようにしてます。 firefoxはobjectタグは無視していて、embedタグで表示されますが、動画上で右クリックをするとパスが表示されてしまいます。 これを表示させない方法はないでしょうか？ firefox対応の右クリック禁止javascriptを使用したところ、ページでは大丈夫でしたが動画上では無効でした。 http://okwave.jp/kotaeru.php3?q=1375996のページのように 画像を載せるやり方をやってみましたがfirefoxでは意味がありませんでした。

    • ベストアンサー
    • HTML
  • wordpressのimgに設置したsvgが非表示

    wordpressでサイトを作っています。imgタグに設置したsvgファイルが表示されません。どうすれば表示できるか教えていただけますでしょうか？ 例えばこのようにimgは設定しています。 <h1><a href="#"><img src="https://www.ishiura-kagu.com/n-image/ishiura_logo.svg" alt=""></a></h1> 参照サイト https://www.ishiura-kagu.com/ishiura-information/ishiura-case/ 宜しくお願い致します。

    • ベストアンサー
    • HTML

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する