hiromasa.zone : o)

2006/12/3 Sunday 投稿時の月齢:12.9  月名:十三夜  潮汐:中潮 Moon:12.9[十三夜]今日の心技体 : 低調期好調期低調期

SVG もういっちょう このエントリをはてなブックマークに追加このエントリをdel.icio.usに追加

日記 - 晴時々雪 ひろまさ @ 18:29

SVG もういっちょういきます。

 [Firefoxのみで動作確認]

Opeara9 でもいけてますか? 🙂 > Sa・Ga さん (コメントありがとうございました)

昨日の chameleon さんからコメントいただきましたとおり、Scalable Vector Graphics です。

ベクターグラフィックを XML で標準的に表現したもので、Web でも使うことが出来ます。 いまのところ、Firefox / Opera 系でサポートされている模様。 IE でも adobe のプラグインいれるとみれるみたいですね。

DOM で JavaScript からダイナミックHTML みたいに属性値をいじると、アニメーションできたりインタラクティブに操作をしたりできます。 上はタイマーでアニメーションさせている様子です。 (ただ、あんまり描画パフォーマンスはよくないかも。 いや、気のせいかも 🙂

SVG をだせる、Inkscapeの出力ファイルや各種ドキュメントを参考にしていろいろやってみているのですが、む、むずい。。

Scalable Vector Graphics (SVG) 1.1 Specification

SVG学習辞典

SVG入門(SVGについて詳しく解説します

コネクタはないのかな・・・。

XML だすだけでベクターグラフィックが描けるのでスクリプト言語と相性が良さそうです。 もうちょっとがんばってみます。。

だましだましやっていたので、かなり恥ずかしいものですが上のソースおいておきます。 興味がある方はあそんでみてください。 🙂

  1.  <?xml version="1.0" encoding="UTF-8"?>
  2.  <!DOCTYPE
  3.   svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  4.   "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
  5.  <svg
  6.   xmlns="http://www.w3.org/2000/svg"
  7.   xmlns:xlink="http://www.w3.org/1999/xlink"
  8.   onload="animation(evt)">
  9.  
  10.   <!-- アニメ用の JavaScript -->
  11.   <script language="javascript1.2">
  12.   <![CDATA[
  13.  
  14.   var svgdoc = null;
  15.   var rotate1 = 0;
  16.   var rotate2 = 0;
  17.   var rotate3 = 0;
  18.  
  19.   /* onLoad のイベントハンドルしてドキュメント取得/タイマ開始 */
  20.   function animation(evt) {
  21.  
  22.   target = evt.target
  23.   svgdoc = target.ownerDocument;
  24.  
  25.   next_frame();
  26.   setInterval('next_frame()', 20);
  27.  
  28.   }
  29.  
  30.   /* 属性取って変更するとアニメする */
  31.   function next_frame() {
  32.  
  33.   var rect1 = svgdoc.getElementById('rect1');
  34.   var rect2 = svgdoc.getElementById('rect2');
  35.   var rect3 = svgdoc.getElementById('rect3');
  36.  
  37.   ro1 = "rotate(" + rotate1 + ",200,150)";
  38.   ro2 = "rotate(" + rotate2 + ",200,250)";
  39.   ro3 = "rotate(" + rotate3 + ",250,250)";
  40.  
  41.   rect1.setAttribute("transform", ro1);
  42.   rect2.setAttribute("transform", ro2);
  43.   rect3.setAttribute("transform", ro3);
  44.  
  45.   rotate1++;
  46.   rotate2--;
  47.   rotate3++;
  48.  
  49.   }
  50.   ]]>
  51.   </script>
  52.  
  53.   <!-- 図形の定義 -->
  54.   <g fill-opacity="0.7" stroke="black" stroke-width="4px">
  55.   <rect id="rect1" transform="" x="150" y="100" width="150" height="150" fill="red" />
  56.   <rect id="rect2" transform="" x="100" y="200" width="150" height="150" fill="blue" />
  57.   <rect id="rect3" transform="" x="200" y="200" width="150" height="150" fill="green" />
  58.   </g>
  59.  
  60.  </svg>

追記。

正直いまは反省している・・・。

 [Firefoxのみで動作確認]

↑これは Opera だとだめなようです…。

5 Comments

Comment

  1. From: Sa・Ga - 2006/12/3 Sunday Nighttime (Comment)

     Opera 9でもいけてるようです。動いているようです。

    #  当然ながら携帯電話はダメですね。
    #  あと、IE7でもダメっぽい・・・。

     コメントが遅くなってしまい申し訳ありませんでした。夕方から新宿のヨドバシキャメラに出かけていたものでして。
     やっぱりWiiもPS3も売り切れでした。

     私の乏しい想像力では使い道を思い浮かべることができませんが、絵描き歌とかかけるかな?(音はどっから持ってくるんだ)

  2. From: ひろまさ - 2006/12/3 Sunday Nighttime (Comment)

    Sa・Ga さん、ありがとうございます。 😀

    動的生成の使い方だと、グラフとかの描画ですかね~。 AJAX とからめても面白そうです。 インタラクティブ絵描き歌いいですね。 :mrgreen:

    単純に動きと描画だけなら、Flash に一日の長か…という感想を今のところ持っています。 もうちょっといじってみよう…。

  3. From: Sa・Ga - 2006/12/4 Monday Nighttime (Comment)

    ↑これは Opera だとだめなようです…。

     おろ? うちのOpera 9では、なにやら左上方向に向かってアニメーションしているように見えます。

    動的生成の使い方だと、グラフとかの描画ですかね~。

     はっ! そうだその手があったんだ!
     さらに応用して、電車のダイヤグラムとか書けそうですね(笑)。俺はやらないけど。

     Flashと違ってカネがかからない(と思う)点はいいですね。
     ご指摘のようにスクリプト言語との親和性も良さそうですが、IEで動かないというのはちょっと。

  4. From: ぼの - 2006/12/4 Monday Nighttime (Comment)

    わーん、ワープくん(仮名)が動いてるー!o(*’-‘*)o

    Flash より軽いのでしょうか。絵にもよるのかな?

  5. From: ひろまさ - 2006/12/5 Tuesday Nighttime (Comment)

    おお、Opera 9 だと大丈夫でしたか。 Opera 8 だったのかな…。 ありがとうございます。

    電車のダイアグラムすごく良いですね!

    いろいろやってみたのですが、今のところ SVGの描画パフォーマンスは各ブラウザの実装上あまりよくなさそうなので(遅い…)、Flash の代替えよりも Acrobat の代替えとして考えるといろいろ面白いこと出来そうです。 XML だすだけで帳票なんかつくれますね。 ベクターなので印刷にも耐えられます。 WP 的には管理画面でつかえるかな~といった印象です。

    ちなみに、ちゃんと確認していませんが Adobe Acrobat がはいっていると IE でもみれる…、ような気がします。(もう一台のPCでは一部みれました)

    > わーん、ワープくん(仮名)が動いてるー!o(*’-‘*)o

    えへ、気がついてくれて良かったです。 😉


このサイトはコンテンツをフリーズしました。トラックバック・コメントは閉じられています。

新しいサイトは、

hiromasa.another :o)

です。 :-)

このサイトについて

このブログは引っ越しを行いコンテンツはフリーズしています。hiromasa.anotherへどうぞ。

Powerd By WordPress

We (Heart) WordPress

WordPressME Logo
WordPress Plugins

ブログ内検索

Todays Popular

WordPress Ring

はてなリング - WordPress -

情報

34 queries. 0.397 seconds.

このページの先頭へ