プログラミング基礎 I

第十三回 (2011年 6月 27日)

SVG の応用

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

Martin J. Dürst

AGU

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

目次

これからの予定

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

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

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

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

サーバの問題により、締切は 6月 26日 (日曜日) の 22:00 まで延長

XHTML と SVG の組み合わせ

  1. XHTML も SVG も XML のため、同ファイルで組み合わせ可能
  2. 別ファイルの SVG を XHTML に取り入れ (三つの方法の例)

<object> 要素が一番確実

<object> 要素

<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 のテキスト

リンクの追加

部品の定義と使用

部品の定義

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

回転、移動、拡大縮小

SVG のアニメーション

アニメーション

例:

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

アニメーションの時間帯

アニメーションの時間帯は次の属性で指定:

演習: もっと面白い SVG の図

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

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

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