プログラミング基礎 I

第十三回 (2011年 6月 27日)

SVG の応用

http://www.sw.it.aoyama.ac.jp/2011/PB1/lecture12.html

Martin J. Dürst

© 2006-11 Martin J. Dürst 青山学院大学

目次

• これからの予定
• SVG の応用:
  • XHTML と SVG の組み合わせ
  • テキスト
  • リンクの追加
  • 部品の定義と使用
  • 回転、移動、拡大縮小など
  • アニメーション

これからの予定

• 6月27日: SVG の応用
• 7月4日: 40分ぐらいの平常試験、SVG の応用

前回の演習・宿題: 面白い SVG の図形

習った様々な部品や機能を使って面白い SVG の図を作って下さい。

簡単でもいいですが、何か意味のあるものを作って下さい。

授業中の他の学生に見せてもいい内容にしてください。

サーバの問題により、締切は 6月 26日 (日曜日) の 22:00 まで延長

XHTML と SVG の組み合わせ

1. XHTML も SVG も XML のため、同ファイルで組み合わせ可能
   • DTD、ネームスペース、プラグインに注意
   • 一部のブラウザだけ (W3C の Amaya など)
2. 別ファイルの SVG を XHTML に取り入れ (三つの方法の例)
   • <object data='file.svg'> 要素 (IE6 まではだめ)
   • <embed src='file.svg'> 要素 (標準化されてないけど幅広く使用可)
   • <iframe> 要素 (図形に外枠がつく)
   • <img> 要素

<object> 要素が一番確実

<object> 要素

• <img> 要素と類似が、内容がフォールバックに使用
• 入れ子によって複数のフォールバックが実現可能

<object type="image/svg+xml"
    data="panda.svg"
    height="200" width="200">
  <object type="image/gif"
      data="panda.gif">
    A sketch of a panda's face,
    with green background
  </object>
</object>

SVG のテキスト

• <text> 要素の内容で指定
• x 属性と y 属性で位置を指定
  (横書きの場合に最初の文字の左下)
• CSS でスタイル付け

リンクの追加

• 任意の部品を <a> 要素で囲むとこの部品がリンクになる
• XHTML と違って、SVG は XLink を使用
• 以前の授業で提示した SVG 文書の外枠の場合、次になる:

  <a xlink:href='リンク先'>
    リンクをつける図形 (複数可)
  </a>

部品の定義と使用

• 文書の場合、同じ文を繰り返すのはつまらない
• 図形の場合、部品を繰り返すのが多い
• 定義だけの部品 (そのまま表示されないもの) は <defs> 要素内で記述
• <use> 要素で使用
  • use される部品のスタイルは上書不可能
  • <use> やその親からスタイルを継承

部品の定義

• <defs> (definitions) 要素内に再利用したい部品を定義
• <defs> 内の部品は直接表示されない
• 部品ごとに <g> (group) 要素で囲む
• <g> 要素を id 属性で識別

<defs>
  <g id='part1'>
    <rect x='0' y='0' width='20' height='20'/>
    <circle cx='20' cy='20' r='15'/>
  </g>
</defs>

部品の使用

• <use> 要素で部品を使用
• xlink:href 属性で使用する部品の指定
• #識別子 でファイル内の部品の識別子を指定
• <defs> 内の部品だけではなく、他の部品も再利用可

<use xlink:href='#part1' /> <!-- 同じファイル内 -->
<use xlink:href='file.svg#part1' /> <!-- 別のファイル -->

回転、移動、拡大縮小

• transform 属性で様々な変更ができる
• transform 内の指定:
  • translate (tx ty): 移動
  • scale (sx sy): 拡大縮小
  • rotate (α): 回転 (原点が中心)
  • rotate (α tx ty): 回転 (t_x t_y が中心)
  • skewX (α): x 軸方向の傾斜
  • skewY (α): y 軸方向の傾斜
• transform 内に複数の変化が指定可能
• 変化を複数の入れ子になっている要素に指定可能
• 変化は内から外へ、右から左へ適用される (例)

SVG のアニメーション

• アニメーションで図形をもっと面白く
• プログラムによる (procedural、手続き型) アニメーションも可能
• 簡単な指定 (declarative、宣言型) でも強力なアニメーションが可能:
  • 対処の要素、属性の指定
  • 時間帯、繰り返しなど指定
  • 属性値や特性値の指定

アニメーション

• <animate>, <animateTransform> などでアニメーションを作成

例:

<rect x='20' y='20' width='50'>
  <animate attributeName="height"
        from="1" to="100" dur="5s"
        repeatCount="indefinite" />
</rect>

アニメーションの時間帯

アニメーションの時間帯は次の属性で指定:

• begin: スタートの時間
• dur (duration): 長さ
• end: 終わりの時間
• repeatCount: 繰り返しの回数;
  indefinite が無限
• fill='freeze': 終了後に終了状態に留まる (元に戻らない)

演習: もっと面白い SVG の図

今日習った様々な部品や機能を使ってもっと面白い SVG の図を作って下さい。

授業中の他の学生に見せてもいい内容にしてください。

7月 1日 (金曜日) の 22:00 までに Moodle に投稿。