プログラミング基礎 I

第十三回 (2010年 7月12日)

SVG の応用

http://www.sw.it.aoyama.ac.jp/2010/PB1/lecture13.html

Martin J. Dürst

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

目次

• これからの予定
• SVG の応用:
  • XHTML と SVG の組み合わせ
  • リンクの追加
  • 部品の定義と使用
  • 回転、移動、拡大縮小
  • その他便利な機能: 透明度、丸い角の長方形

これからの予定

• 最後の授業: 7月 19日 (海の日、授業実施日)
• 期末試験: 8月 2日 (月曜日) 13:10-14:10

過去の問題:

2006 年度の期末試験

2007 年度の期末試験

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

先週のまとめ

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

SVG の仕様書 (日本語)

前回からの宿題: 作りたい面白い図

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

習った SVG の部品以外に欲しい部品を考えてください。

XHTML と SVG の組み合わせ

1. XHTML も SVG も XML のため、同ファイルで組み合わせ可能
   • ネームスペースに注意
   • プラグインとは使用不可
   • スクリプト (ページ内のプログラム) により、データ交換などが余裕
2. 別ファイルの SVG を XHTML に取り入れ (三つの方法の例)
   • <object data='file.svg'> 要素 (IE6 まではだめ)
   • <embed src='file.svg'> 要素 (標準化されてないけど幅広く使用可)
   • <iframe> 要素 (図形に外枠がつく)

<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='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 内に複数の変化が指定可能
• 変化を複数の入れ子になっている要素に指定可能
• 変化は内から外へ、右から左へ適用される (例)

透明度

• 色を none にするとその部分が透明になる
• 例: <rect style='fill: none; stroke: blue; stroke-width: 4' ... />
• fill-opacity: 1.0 は完全不透明、0.0 は完全透明
• stroke-opacity は fill-opacity と同様

丸角の長方形

例:

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

演習: 面白い SVG の図

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

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

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

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