プログラミング基礎 I

第十二回 (2007年 7月4日)

SVG の応用

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

Martin J. Dürst

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

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

目次

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

これからの予定

• 次の授業: 7月 9日 (月曜日)
• 期末試験: 7月23日 (月曜日) 13:10-14:10

全体のスケジュール

2006 年度の期末試験

ミニテストの返却

先週のまとめ

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

SVG の仕様書 (日本語)

月曜日からの宿題: 作りたい面白い図

作りたい面白い図を考えてください。

今日習った 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' /> <!-- 別のファイル -->

SVG のスタイル付け

• 外部スタイルシート: 一般の XML と同様
  <?xml-stylesheet ...
• 内部スタイルシート: <defs> 内に <style> 要素
• style 属性: XHTML と同様
  <rect style='fill: red; stroke: blue;'...
• 特性を属性として使用: SVG 独特
  <rect fill='red' stroke='blue' ...
• class 属性: XHTML と同様
• id 属性: XHTML と同様
• 任意の形の組み合わせ: <g> (XHTML: <div>)

回転、移動、拡大縮小

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

透明性

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

丸角の長方形

例:

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

演習: 面白い SVG の図

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

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

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

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