SVGをobjectタグで埋め込み・表示させる方法
- HTMLにobjectタブを使いSVGファイルを埋め込み・表示させる方法について説明します。
- ブラウザはIE9 Betaを使用していますが、SVGの表示ができません。コードに問題があるか、足りない箇所があるかをご指摘ください。
- <!DOCTYPE html>から</html>までのHTMLコード内に、objectタグを使用してSVGファイルを表示させる方法が記述されています。
- ベストアンサー
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>
- diplo
- お礼率50% (11/22)
- HTML
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
xhtml使うなら文法チェッカー使った方が良いかと思います。 w3 validatorなりanother html lintなり。 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> </head> <body> <div> <object width="200px" height="40px" data="sample.svg" type="image/svg+xml"> SVG表示失敗 </object> </div> </body> </html> http://msdn.microsoft.com/en-us/ie/ff468705#_Scaling_Vector_Graphics 一瞬IEで使えるのと思いましたが、使える様ですね。
その他の回答 (1)
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2281)
paramも指定して下さい。 IE7以前なども対応させるなら、classidが必須になります。 <object width="200" height="40" data="sample.svg" type="image/svg+xml" classid="clsid:377B5106-3B4E-4A2D-8520-8767590CAC86"> <param name="src" value="sample.svg" /> 代替表示 </object> HTML5とXHTMLの区別は付けて置いた方が良いと思います。
関連するQ&A
- XHTML のタイトルが表示されません ご教授おね
タイトル通りなのですがHTML のタイトルが上手く表示されず、本文の中に入ってしまっています。（cf,添付画像） 一番最初の所で躓いてしまいました、解説書の通り何度もやり直したのですが、原因が分からないのです・・・かなり初歩的なこととは思われますがよろしくお願いいたします！ ソースは以下のとおりです。 <!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 http-equiv="Content-Type" content="text/html;charset=utf-8" /> <titile>a</title> <style type="text/css"> </style> </head> <body> </body> </html> ＊ちなみにサンプルでは以下のとおりになっています。（サンプルをインストールすればしっかりと表示されるのです、同じなはずなのに僕が入力しますと上手くいきません） <!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 http-equiv="Content-Type" content="text/html;charset=utf-8" /> <title>a</title> <style type="text/css"> </style> </head> <body> </body> </html>
- ベストアンサー
- CSS
- JavascriptでObjectからJSON形式変換するにはどうすればいいでしょうか？
toSourceだと少し違うし、どうすればいいのでしょうか。簡単に変換できる関数でもあればいいのですが、わかりませんでした。 どなたかご教授お願いします。 <!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 http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>objctからJSONに変換</title> <script type="text/javascript"> obj = new Object(); obj.test = "txt"; str = obj.toSource(); document.write(str); //--> </script> </head> <body> </body> </html>
- ベストアンサー
- JavaScript
- DOCTYPE宣言とdocument.body.clientHeight
お世話になります。 ブラウザのサイズを取得するにはどうすればよいのでしょうか？ document.body.clientHeightで取得出来るのは分かりましたが DTDにより動作したり、しなくなるのも分かりました。 ×動作しない <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ○動作する <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 後者のものですとIEでは動作しますが、firefoxでは動作しません。 何か対処法は、御座いませんでしょうか？ 一番望む形は <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> の宣言で、ブラウザサイズが取れるようになるのがベストです。 CSSを使用しているので<?xml version="1.0" encoding="UTF-8"?>を入れると 表示モードが互換になるので・・・。 対応したいブラウザはIE6.0、firefox,Safariです。 一応ソース <?xml version="1.0" encoding="UTF-8"?> <!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 http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script> function init(){ var bodyHeight = document.body.clientHeight; alert(bodyHeight); } </script> </head> <body onload="init();"> <div> ほげ </div> </body> </html>
- ベストアンサー
- JavaScript
- ホームページをセンターに表示したい！！
DreamweaverCS3を使ってホームページを作成しています。 ホームページをセンターに表示したく、 marginをautoにしてもセンターに表示されません。 いったい何が原因なのでしょうか？？ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!-- saved from url=(0014)about:internet --> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 中略 <style type="text/css"> td img {display: block;}body { margin:auto; } ↑この部分です。 どなたかご教授下さい。
- ベストアンサー
- ホームページ作成ソフト
- ブラウザ上部に余白があります。
近い現象はありましたが、解決出来なかったのでご質問させて頂きます。 下記のソースでhtmlを制作しましたが、#headerの上に余白があります。 どうすればこの余白をとる事が出来るでしょうか？ お教え頂ければと思います。 ↓ソース↓ <!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 http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>無題ドキュメント</title> <style type="text/css"> <!-- html, body{ margin:0; padding:0; } div#header{ background-color: #F00; margin:0px; padding:0px; } --> </style> </head> <body> <div id="header"> <h1>test</h1> </div> </body> </html>
- 締切済み
- HTML
- Operaでズレない方法をご指導下さい
IE6、firefox1.5ではズレないのですが、 Opera9.1.0では <div id="main">テキスト</div> の箇所が左に1pxズレてしまします。 ブラウザの横幅を大きくしたら小さくしたりすると、 ズレない場合もあるのですが、最大にすると1pxだけズレます。 ズレない良い方法がありましたら、どうか教えて下さい。 <!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 http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>無題ドキュメント</title> <style type="text/css"> <!-- body { background-image: url(bg.jpg); background-repeat: repeat-y; background-position: center top; margin: 0; } #main { background-color: #00FFCC; width: 700px; margin:0 auto; } --> </style> </head> <body> <div id="main">テキスト</div> </body> </html>
- 締切済み
- HTML
- HTMLの中にperlを記述する方法について
例えばphpの場合、下記の<?php～?>の間にphpの記述をしますが、同じことをperlで行おうとした場合、どのように記述すれば良いか分からなかったため、アドバイスいただける方がいらっしゃいましたら、ご教示の程、よろしくお願いします。 <!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 http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>title</title> </head> <body> <?php ?> </body> </html> なお、既存のhtmlにperlを追加したいと思っているため、上記のhtml自体をperlで書きなおす以外でお願いします。 以上、宜しくお願いします。
- ベストアンサー
- Perl
- SafariでPHPソースがそのまま表示される
Safariでindex.phpを開くとソースコードがそのまま表示されてしまいます。 拡張子をphpとしているだけでソース内にはphpスクリプトは記述しておりません。 なぜでしょうか？ ※ファイル名をindex.htmlに変えると正しく表示されます。 Windows 7 Home Premium 64bit Safari5.1.5 ソースコードのエンコーディング：utf-8 <!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" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="content-style-type" content="text/css" /> <meta http-equiv="content-script-type" content="text/javascript" /> <meta name="keywords" content="" /> <meta name="description" content="" /> <title>テストtitle> </head> <body> <h1>テストページ</h1> </body> </html>
- ベストアンサー
- ブラウザ
- phpのフォーム入力で
phpの勉強初日なのですが、さっそくつまづいてしまいました。 買った本に沿って、簡単なフォーム入力のhtmlファイルと、 その処理のphpファイルを下記のように作ってみたのですが、上手く行きません。 htmlのフォームからのpostは出来ているようなのですが、 phpファイルがコールされると、phpファイルのソースがそのまま表示されてしまって、 postした文字列がechoされません。。。 初日でつまづいてしまっていきなり挫折しそうです。。。 どなたかお詳しい方、お教えいただけると幸いです。 ■input.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>input</title> </head> <body> <form action="inputphp.php" method="post"> <label for="my_name">お名前：</label> <input id="my_name" type="text" name="my_name" size="15" maxlengh="255" value=""/> <input type="submit" value="送信"/> </form> </body> </html> ■inputphp.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>inputphp.php</title> </head> <body> <?php print($_REQUEST['my_name']); ?> </body> </html>
- ベストアンサー
- PHP
- “タグの属性”と“スタイル”の優先度について
HTMLの勉強をしています。以下のソースですと、“cellpadding”が機能しません。試しに、*{margin:0; padding:0;}を外しレンダリングしてみると、うまくいきました。これは、やはり、「“タグの属性”と“スタイル”での指定なら、“スタイル”が優先されると考えてよいのですか？」 よろしく、お願いします。 <!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 http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無題ドキュメント</title> <style text/css> *{ margin:0px; padding:0px; } </style> </head> <body> <table width="200" border="1" cellspacing="1" cellpadding="15"> <tr> <td>セルパディング</td> </tr> </table> </body> </html>
- ベストアンサー
- HTML
お礼
遅くなりましたが、ありがとうございました。