プログラミング基礎 I

第十二回 (2006年 7月10日)

SVG の応用

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

Martin J. Dürst

duerst@it.aoyama.ac.jp, O 棟 529号室

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

目次

• これからの予定
• ミニテストの返却
• SVG の応用:
  • XHTML と SVG の組み合わせ
  • リンクの追加
  • 回転、移動、拡大縮小
  • 部品の定義と使用
  • アニメーション
  • その他便利な機能: 透明性、丸い角の長方形
• 応用例: スイスの駅時計

これからの予定

• 次の授業: 7月11日 (火曜日) 5限 (補講)
• 期末試験: 7月24日 (月曜日) 13:10-14:10

全体のスケジュール

ミニテストの返却

先週の演習 2: 面白い SVG の図

長方形、円、楕円などを使って面白い SVG の図を作って下さい。

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

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

7月 9日 (日曜日) の 23:55 までに Moodle に投稿。

先週のまとめ

• XHTML の表は悪用しないこと
• SVG は XML に基づく拡大縮小可能なベクトルグラフィクスの形式である
• SVG の座標は左上が原点で、+x が右方向で、+y が下方向
• 基本形として長方形 (<rect>)、円 (<circle>)、楕円 (<ellipse>)、線 (<line>)、多角形 (<polygon>) などがある
• SVG のスタイル付けは XHTML と非常によく似ている

SVG の仕様書 (日本語)

XHTML と SVG の組み合わせ

1. XHTML も SVG も XML のため、同ファイルで組み合わせ可能 (ネームスペースに注意、ブラウザのサポートは少ない)
2. SVG を別のファイルにして、<object> 要素で XHTML に取り入れ

<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>

リンクの追加

• 任意の部品を <a> 要素で囲むとこの部品がリンクになる
• XHTML と違って、SVG は XLink を使用
• 先週の SVG 文書の外枠の場合、次の様になる:

  <a xlink:href='リンク先'>
    リンクをつける図形
  </a>

部品の定義と使用

• 文書の場合、同じ文を繰り返すのはつまらない
• 図形の場合、部品を繰り返すのが多い
• <defs> 要素内で定義
• <use> 要素で使用
• 回転、移動、拡大縮小で展開

部品の定義

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

<defs>
  <g id='myPart'>
    <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='#myPart' /> <!-- 同じファイル内 -->
<use xlink:href='file.svg#myPart' /> <!-- 別のファイル -->

回転、移動、拡大縮小

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

アニメーション

• <animate>, <animateTransform> などでアニメーションが作れる
• 例:
  

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

透明性

• 色を none にするとその部分が透明になる
• 例: <rect style='fill: none; stroke: blue; stroke-width: 4' ... />

丸角の長方形

• 長方形: <rect x=左のx座標 y=上のy座標 width=幅 height=高さ rx=角のx方向の半径 ry=角のy方向の半径 />

演習: SVG の面白い図

今まで作った面白い図を更に面白くして下さい。部品の再利用、変形、アニメーションを使って下さい。

結果は是非 Moodle に出して出してください。しかし成績には反映されない。