プログラミング基礎 I

第十三回 (2012年 7月 2日)

SVG の応用

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

Martin J. Dürst

前回のまとめ

部品は <g> で定義、<use> で使用
部品の識別子は id 属性で付与、xlink:href='#...' で参照
transform 属性で回転 (rotate)、移動 (translate)、拡大縮小 (scale)
none は透明な色を表す
rx 属性と ry 属性で長方形の角を丸めることが可能

SVG の仕様書 (日本語)

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

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

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

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

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

これからの予定

7月 9日: 14回目の授業 (SVG の応用: アニメーション)

(7月16日: 海の日)

7月23日～8月4日: 期末試験 (60分)

重要: 色鉛筆を持参すること (黒、赤、青、緑、黄色)

過去の問題 (60分の期末試験):

2006 年度の期末試験

2007 年度の期末試験

スタイルを変えると一部の正解例が見える。

XHTML と SVG の組み合わせ

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

XHTML と SVG の組み合わせの例


方法	埋め込み	`<object>`	`<embed>`	`<iframe>`	`<img>`
例

`<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 (t_x t_y): 移動
- scale (s_x s_y): 拡大縮小
- rotate (α): 回転 (原点が中心)
- rotate (α t_x t_y): 回転 (t_x t_y が中心)
- skewX (α): x 軸方向の傾斜
- skewY (α): y 軸方向の傾斜
transform 内に複数の変化が指定可能
変化を複数の入れ子になっている要素に指定可能
変化は内から外へ、右から左へ適用される (例)

SVG のアニメーション

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

`<animate>` 要素の例

<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 の図を作って下さい。