== svgとjavascript == HTML5ではHTMLファイル内にsvgがそのまま記述できます。 {{{ sample ... }}} ---- === inkscapeのデータを利用する === inkscapeで描いて保存するとsvgファイルができます。 これを利用する方法を示します。 inkscapeでは、用紙の左上隅が原点になっています。 そのまま利用できるように、位置や大きさを合わせて描きます。 . 長方形ツールで枠を描き、表示される部分を確かめておくとよい。 . {{{}}}と指定すると、この範囲が表示される。 . {{attachment:svg01.png}} スクリプトで用いる部品に名前をつけておきます。 . 部品を選び、右クリックし、プロパティを表示させます。 . '''ID'''の部分に名前を入力します。 . {{attachment:svg02.png}} 保存し、エディタで開くとこのようになっています。 . そのままコピーして使えます。 . {{attachment:svg03.png}} 指定箇所にそのままコピーするだけで動作しますが、 動作しないときはブラウザのエラー表示を見て、 対応する部分を削除します。 エラーが起こるのはinkscape特有の記述の箇所です。たとえば . {{{inkscape:}}}などで始まっている属性 . 特別なstyle svgタグを {{{}}} に修正したときのブラウザでの表示例。 . {{attachment:svg04.png}} ---- === 例 === {{{}}} として利用し、ユーザの入力により○×を表示します。 ==== inkscapeでの作業 ==== 表示範囲に合わせて絵を描きます。 . ○×はグループ化し、名前をつけておきます。{{{id="maru"}}}としました . 表示範囲外にありますが、javascriptで上下に移動する予定です。 . {{attachment:svg05.png}} 表示範囲を確かめるための長方形は削除してから保存しました。 ==== htmlファイルの作成 ==== エディタで作成します。 このような構成です。 {{{ sample
文字の記述
図形の記述 }}} ==== 図形の記述部分 ==== inkscapeで作成したファイルをエディタで開き、 との間の部分 (ほとんど全体)をコピーして図形の記述部分に入れます。 ==== 文字の記述部分 ==== 問題を表示し、答えを入力するための記述をします。 これを左に、絵を右に表示するため float:left の指定をしています。 {{{
問題

答え


}}} ==== スクリプトの記述部分 ==== 正解のとき○を表示するには {{{id="maru"}}}の要素を上に150移動します。 移動はこのように書けます。 {{{ var obj = document.getElementById("maru"); obj.setAttribute("transform", "translate(0,-150)"); }}} 移動量を変えると×が表示できます。 ==== 完成画面 ==== 正解のとき右手の上に○が表示されます。 . {{attachment:svg06.png}}