HTML5のSVGタグではインラインでの記述しかできないのでしょうか?
たとえば<svg width="" height="" src="graph.svg"></svg>
などとして、別ファイルに管理できればと思うのですが。
<object><embed>での記述と、<svg>での記述では動作が違いますね。
書き方が悪いのか、それともブラウザがサポートしきれてていないのか、、、
<svg>タグで書いた方は、一部アニメーションせずに止まっています。(Mac Safari5.1)
http://home.wi-wi.jp/lab/00k/ (<object>、<embed>タグにて)
http://home.wi-wi.jp/lab/00m/ (<svg>タグ、インライン記述にて)
それにしても、JavaScriptからアニメーションさせるには、
setIntervalなどでwidthなどのプロパティを逐一変更しないと行けないのが残念ですね。
<animation>要素を作って挿入できればいいのですが、、、
> HTML5のSVGタグではインラインでの記述しかできないのでしょうか?
>
> たとえば<svg width="" height="" src="graph.svg"></svg>
> などとして、別ファイルに管理できればと思うのですが。
すでに神崎さんがお試しのように、<object> がその役割を持っています。
HTML5の<svg>はHTML内にインラインでSVGを入れるために用意されたものですので、
<svg>にsrc属性が用意されることはないかもしれませんね。
> <object><embed>での記述と、<svg>での記述では動作が違いますね。
> 書き方が悪いのか、それともブラウザがサポートしきれてていないのか、、、
> <svg>タグで書いた方は、一部アニメーションせずに止まっています。(Mac Safari5.1)
Windows 7 の Chrome 15 dev で拝見したところ、どちらも同じように動作してました。
SVGのサポートの度合いが、ブラウザーやバージョンによって違っているのでしょうね。
> それにしても、JavaScriptからアニメーションさせるには、
> setIntervalなどでwidthなどのプロパティを逐一変更しないと行けないのが残念ですね。
> <animation>要素を作って挿入できればいいのですが、、、
SVGに限らず、CanvasなどでもJSでアニメーションするには、どうしてもタイマー関数が
必要になりますので、時には面倒に感じますよね。
<animation> がどのブラウザーにも実装されるといいですよね。
--
Futomi Hatano
http://www.html5.jp/
http://www.futomi.com/
http://twitter.com/futomi/
2011年8月17日3:09 Wataru Kanzaki <goo...@wi-wi.jp>:
> --
> このメールは Google グループのグループ「html5-developers-jp」の登録者に送られています。
> このグループに投稿するには、html5-dev...@googlegroups.com にメールを送信してください。
> このグループから退会するには、html5-developer...@googlegroups.com にメールを送信してください。
> 詳細については、http://groups.google.com/group/html5-developers-jp?hl=ja からこのグループにアクセスしてください。
>
> HTML5のSVGタグではインラインでの記述しかできないのでしょうか?
>
> たとえば<svg width="" height="" src="graph.svg"></svg>
> などとして、別ファイルに管理できればと思うのですが。
SVGも画像フォーマットですから <img src="graph.svg"> と書けますよ。(最近のブラウザなら)
ただし、他のブラウザでは試していないので知らないですが、Firefoxだとスクリプトによる操作は出来なくなります。後述のSMILアニメーションなら可能ですが。
>
>
> <object><embed>での記述と、<svg>での記述では動作が違いますね。
> 書き方が悪いのか、それともブラウザがサポートしきれてていないのか、、、
> <svg>タグで書いた方は、一部アニメーションせずに止まっています。(Mac Safari5.1)
>
> http://home.wi-wi.jp/lab/00k/ (<object>、<embed>タグにて)
> http://home.wi-wi.jp/lab/00m/ (<svg>タグ、インライン記述にて)
>
>
> それにしても、JavaScriptからアニメーションさせるには、
> setIntervalなどでwidthなどのプロパティを逐一変更しないと行けないのが残念ですね。
> <animation>要素を作って挿入できればいいのですが、、、
SMILというものがあります。
SVG animation with SMIL - MDN Docs
https://developer.mozilla.org/en/SVG/SVG_animation_with_SMIL
Animation - SVG 1.1 (Second Edition)
http://www.w3.org/TR/SVG/animate.html
よろしくお願いします。
> それにしても、JavaScriptからアニメーションさせるには、
> setIntervalなどでwidthなどのプロパティを逐一変更しないと行けないのが残念ですね。
> <animation>要素を作って挿入できればいいのですが、、、
可能だと思います。以下のサンプルをChrome13とSafari5.1で確認しています。
http://dl.dropbox.com/u/336104/tmp/svg_animate.html
http://dl.dropbox.com/u/336104/demo/svgraph/sample/index.xhtml
beginElementなどを使ってアニメーションするタイミングの調節などをおこなう
必要があります。既出ですが詳細は以下に記載されています。
http://www.w3.org/TR/SVG/animate.html
--
----------------------------------------
Name : 外村 和仁
Email : k.hok...@gmail.com
URL : http://webtech-walker.com/
----------------------------------------
> --
> このメールは Google グループのグループ「html5-developers-jp」の登録者に送られています。
> このグループに投稿するには、html5-dev...@googlegroups.com (mailto:html5-dev...@googlegroups.com) にメールを送信してください。
> このグループから退会するには、html5-developer...@googlegroups.com (mailto:html5-developer...@googlegroups.com) にメールを送信してください。
> 詳細については、http://groups.google.com/group/html5-developers-jp?hl=ja からこのグループにアクセスしてください。
SVGも画像フォーマットですから <img src="graph.svg"> と書けますよ。(最近のブラウザなら)
ただし、他のブラウザでは試していないので知らないですが、Firefoxだとスクリプトによる操作は出来なくなります。後述のSMILアニメーションなら可能ですが。
やはりサポート状況など、ブラウザ依存度が大きいですね。
そういえば、私が利用しているサーバーでは、.htaccessで
AddType image/svg+xml .svg
を設定しておかないと、<img>や<object><embed>で表示できないようでした。
(MIME-Typeを見てないブラウザは表示できます。)
> 可能だと思います。以下のサンプルをChrome13とSafari5.1で確認しています。
> http://dl.dropbox.com/u/336104/tmp/svg_animate.html
> http://dl.dropbox.com/u/336104/demo/svgraph/sample/index.xhtml
ふむ。。。
私が試したとき(3月頃ですが)は、<object><embed>だけですが、
SVGドキュメントにアクセスすること自体ができなかったりもしました。
LiveConnect(という言い方でいいんでしょうか?)の影響かもしれませんが。
<svg>はSVGイメージの埋め込みというよりも、
<div><span></span></div>などのタグ構造と同じような扱いになってると考えるとしっくりきますね。
時間が空いたときに、<iframe>の動作なども調べてみたいと思います。
AjaxでHTMLページの内容と一緒にSVGイメージやアニメーション定義をダウンロードし、
スクリプトで生成、表示する、というのがしたいのですが、
その場合は、どうやら<svg>タグを使った方がよさそうな感じですね。
ありがとうございました。