svgとjavascript172013-01-09 01:15:41masahiko162012-12-18 00:32:17masahiko152012-12-17 02:02:37masahiko142012-12-17 01:58:15masahiko132012-12-17 01:57:27masahiko122012-12-17 01:43:34masahiko112012-12-17 01:31:06masahiko102012-12-17 01:09:52masahiko92012-12-17 01:08:27masahiko82012-12-17 01:07:59masahiko72012-12-17 01:01:08masahiko62012-12-16 13:14:53masahiko52012-12-16 13:13:41masahiko42012-12-16 13:03:08masahiko32012-12-16 13:00:27masahiko22012-12-16 12:41:56masahiko12012-12-16 12:39:08masahikosvgとjavascriptHTML5ではHTMLファイル内にsvgがそのまま記述できます。
sample
]]>inkscapeのデータを利用するinkscapeで描いて保存するとsvgファイルができます。 これを利用する方法を示します。 inkscapeでは、用紙の左上隅が原点になっています。 そのまま利用できるように、位置や大きさを合わせて描きます。 長方形ツールで枠を描き、表示される部分を確かめておくとよい。 <svg width="200" height="150">と指定すると、この範囲が表示される。 svg01.png スクリプトで用いる部品に名前をつけておきます。 部品を選び、右クリックし、プロパティを表示させます。 IDの部分に名前を入力します。 svg02.png 保存し、エディタで開くとこのようになっています。 そのままコピーして使えます。 svg03.png 指定箇所にそのままコピーするだけで動作しますが、 動作しないときはブラウザのエラー表示を見て、 対応する部分を削除します。 エラーが起こるのはinkscape特有の記述の箇所です。たとえば inkscape:などで始まっている属性 特別なstyle svgタグを <svg width="200" height="150"> に修正したときのブラウザでの表示例。 svg04.png 例<svg width="200" height="150"> として利用し、ユーザの入力により○×を表示します。 inkscapeでの作業表示範囲に合わせて絵を描きます。 ○×はグループ化し、名前をつけておきます。id="maru"としました 表示範囲外にありますが、javascriptで上下に移動する予定です。 svg05.png 表示範囲を確かめるための長方形は削除してから保存しました。 htmlファイルの作成エディタで作成します。 このような構成です。
sample
文字の記述
]]>図形の記述部分inkscapeで作成したファイルをエディタで開き、 <svg>と</svg>の間の部分 (ほとんど全体)をコピーして図形の記述部分に入れます。 スクリプトの記述部分正解のとき○を表示するには id="maru"の要素を上に150移動します。 移動はこのように書けます。 移動量を変えると×が表示できます。 完成画面正解のとき右手の上に○が表示されます。 svg06.png