welcome: please sign in

ページのコンテンツをアップロード

下記のページ名のコンテンツをアップロードすることができます。 もしページ名を変更すれば、別のページのコンテンツをアップロードすることもできます。 ページ名が空の場合、ファイル名からページ名を決定します。

ページコンテンツを格納したファイル
ページ名
コメント

location: svgとjavascript

svgとjavascript

HTML5ではHTMLファイル内にsvgがそのまま記述できます。


inkscapeのデータを利用する

inkscapeで描いて保存するとsvgファイルができます。 これを利用する方法を示します。

inkscapeでは、用紙の左上隅が原点になっています。

そのまま利用できるように、位置や大きさを合わせて描きます。

スクリプトで用いる部品に名前をつけておきます。

保存し、エディタで開くとこのようになっています。

指定箇所にそのままコピーするだけで動作しますが、 動作しないときはブラウザのエラー表示を見て、 対応する部分を削除します。 エラーが起こるのはinkscape特有の記述の箇所です。たとえば

svgタグを <svg width="200" height="150"> に修正したときのブラウザでの表示例。


<svg width="200" height="150"> として利用し、ユーザの入力により○×を表示します。

inkscapeでの作業

表示範囲に合わせて絵を描きます。

表示範囲を確かめるための長方形は削除してから保存しました。

htmlファイルの作成

エディタで作成します。 このような構成です。

図形の記述部分

inkscapeで作成したファイルをエディタで開き、 <svg>と</svg>の間の部分 (ほとんど全体)をコピーして図形の記述部分に入れます。

文字の記述部分

問題を表示し、答えを入力するための記述をします。

これを左に、絵を右に表示するため float:left の指定をしています。

スクリプトの記述部分

正解のとき○を表示するには id="maru"の要素を上に150移動します。

移動はこのように書けます。

移動量を変えると×が表示できます。

完成画面

正解のとき右手の上に○が表示されます。