Download [Shirai Lab] Kanagawa Institute of Technology (International)

(1)

・レポートの構造を考える

・アウトラインを使う

・スタイルを使う

・スクリーンショットを使う

・引用する

目的

テキストエディタを用いて XML 記法を学び、 SVG を自由に描けるようになる

理論

W3C によって標準化された XML および SVG を記法とサンプルに従い実際にブ

ラウザで動作を確認する。

錯視図形についてパラメータを変更し、体験する。

方法

Opera を使う

Terapad を使う

HTML を学ぶ

XML をつかって SVG を自分で書く

課題として設定された作業

1. 長方形

2. グラデーション

線形グラデーションについて、<defs>タグを使って実装した。

(2)

【線形グラデーションの実行結果・リスト 2.10 より】

<?xml version="1.0" encoding="iso-8859-1" ?>

<defs>

</defs>

</g>

</svg>

赤字で記したように、 <defs>タグ内で定義(definition)した「Grad1」を<rect>タグ内の fill

プロパティ「url(#---)」にて指定する。

3. _多角形

4. _円

実験・結果

問題 ^2.2

問題 ^2.3

問題 ^2.4

問題 ^2.5

(3)

レポート課題１

図形とソース

エディターについて

間違えた事項

■グラデーションの指定時に defs で宣言されていない名称（文字の間違いなど）を使うと、以

下のような実行結果になる。

　左のように、真黒になる。

■「This document had no style information.」というエラーが出る

　SVG ファイルの冒頭、XMLNS（ネームスペース）の指定先がほんの少し間違えているだけで

も、 XML を解釈できずこのようなエラーが表示される。なお、Opera のデバッガでもこの問題を

指摘することができないので、解決するのが困難であった。

SVG の基本図形

グラデーション

使用したタグと属性

(4)

図形が描かれる順序と表示の形について

正８角形を電卓で座標算出

放射グラデーション

パターンを用いた図形

考察

錯視図形に関する考察

同じ色なのに異なって見える例

【図：左右の図形において内側のグレーは[gray]で同じ色であるが、異なって見える】

【P.20 リスト 2.5 より】

×「不思議だと思いました」

○「（書物）によると、～であると記述があった。」 _{★調べてくる}

◎「（仮説）を確かめるため、XX のように実験してみた。」

・引用した URL や書物は文末の「6.その他・参考文献」などでまとめること！どこまでが自分

の意見、所見なのか、引用なのかがわかるように書く。

どちらも同じ[Gray]

(5)

↓ソースコードをそのまま引用する場合（あまりおすすめできない）

リ

ス

ト

の

書

き

方

そ

の他

<?xml version="1.0" encoding="UTF-8" ?>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="100%" width="100%">

<g transform="translate(50,50)">

<rect x="0" y="0" width="200" height="200" fill="black" /> <rect x="50" y="50" width="100" height="100" fill="gray" /> </g>

<g transform="translate(250,50)">

<rect x="25" y="25" width="150" height="150" fill="gray" stroke-width="50" stroke="lightgray" />

</g>

</svg>

Download [Shirai Lab] Kanagawa Institute of Technology (International)

・レポートの構造を考える

・アウトラインを使う

・スタイルを使う

・スクリーンショットを使う

・引用する

目的

テキストエディタを用いて XML 記法を学び、 SVG を自由に描けるようになる

理論

W3C によって標準化された XML および SVG を記法とサンプルに従い実際にブ

ラウザで動作を確認する。

錯視図形についてパラメータを変更し、体験する。

方法

Opera を使う

Terapad を使う

HTML を学ぶ

XML をつかって SVG を自分で書く

課題として設定された作業

1. 長方形

2. グラデーション

線形グラデーションについて、<defs>タグを使って実装した。

【線形グラデーションの実行結果・リスト 2.10 より】

赤字で記したように、 <defs>タグ内で定義(definition)した「Grad1」を<rect>タグ内の fill

プロパティ「url(#---)」にて指定する。

3. 多角形

4. 円

実験・結果

問題 2.2

問題 2.3

問題 2.4

問題 2.5

レポート課題１

図形とソース

エディターについて

間違えた事項

■グラデーションの指定時に defs で宣言されていない名称（文字の間違いなど）を使うと、以

下のような実行結果になる。

左のように、真黒になる。

■「This document had no style information.」というエラーが出る

SVG ファイルの冒頭、XMLNS（ネームスペース）の指定先がほんの少し間違えているだけで

も、 XML を解釈できずこのようなエラーが表示される。なお、Opera のデバッガでもこの問題を

指摘することができないので、解決するのが困難であった。

SVG の基本図形

グラデーション

使用したタグと属性

図形が描かれる順序と表示の形について

正８角形を電卓で座標算出

放射グラデーション

パターンを用いた図形

考察

錯視図形に関する考察

同じ色なのに異なって見える例

【図：左右の図形において内側のグレーは[gray]で同じ色であるが、異なって見える】

【P.20 リスト 2.5 より】

×「不思議だと思いました」

○「（書物）によると、～であると記述があった。」 ★調べてくる

◎「（仮説）を確かめるため、XX のように実験してみた。」

・引用した URL や書物は文末の「6.その他・参考文献」などでまとめること！どこまでが自分

の意見、所見なのか、引用なのかがわかるように書く。

どちらも同じ[Gray]

↓ソースコードをそのまま引用する場合（あまりおすすめできない）

リ

ス

ト

の

書

き

方

そ

の他

3. _多角形

4. _円

問題 ^2.2

問題 ^2.3

問題 ^2.4

問題 ^2.5

　左のように、真黒になる。

　SVG ファイルの冒頭、XMLNS（ネームスペース）の指定先がほんの少し間違えているだけで

○「（書物）によると、～であると記述があった。」 _{★調べてくる}