プログラミング基礎 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号室

AGU

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

目次

これからの予定

全体のスケジュール

ミニテストの返却

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

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

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

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

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

先週のまとめ

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"> An sketch of a panda's face, with green background
<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>

リンクの追加

部品の定義と使用

部品の定義

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

回転、移動、拡大縮小

アニメーション

透明性

丸角の長方形

演習: SVG の面白い図

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

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