このページの本文へ

HTML5のInline SVGをJavaScriptで操作 (5/5)

2011年02月10日 13時00分更新

文●古籏一浩

  • この記事をはてなブックマークに追加
本文印刷

文字(テキスト)の処理

 最後にSVGでテキストを処理してみましょう。SVGでテキストを描くには<text>タグを使います。表示するX座標はx属性で、Y座標はy属性で指定します。このX,Y座標は文字のベースラインの座標になります。以下のように指定すると座標(5, 10)にAの文字が表示されます。

<text x="5" y="10">A</text>

 文字の色などはこれまで説明した図形とまったく同じ方法で変更できます。サンプル11はボタンをクリックすると文字の色を赤に変更します。

ボタンをクリックすると文字の色が赤になる

サンプル11[HTML]

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8" /> 
<title>JavaScriptでSVGテキストを表示</title> 
</head> 
<body>
<h1>JavaScriptでSVGテキストを表示</h1>
<form>
<input type="button" id="change" value="変更">
</form>
<svg width="100%" height="300">
<text id="myText" x="5" y="18">SVG and JavaScriptサンプル</text>
</svg>
<script type="text/javascript">
document.getElementById("change").addEventListener("click", function(){
var txt = document.getElementById("myText");    // SVGテキスト
txt.setAttribute("fill", "#ff0000");
}, true);
</script>
</body> 
</html>

 SVGテキストの内容もJavaScriptで変更できます。サンプル12はボタンをクリックするとSVGテキストの内容が書き換わります。

ボタンをクリックすると違う文字が表示される

サンプル12[HTML]

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8" /> 
<title>JavaScriptでSVGテキストを入れ替える</title> 
</head> 
<body>
<h1>JavaScriptでSVGテキストを入れ替える</h1>
<form>
<input type="button" id="change" value="変更">
</form>
<svg width="100%" height="300">
<text id="myText" x="5" y="18">SVG and JavaScriptサンプル</text>
</svg>
<script type="text/javascript">
document.getElementById("change").addEventListener("click", function(){
var txt = document.getElementById("myText");    // SVGテキスト
txt.textContent = "テキストも入れ替えることができます";
}, true);
</script>
</body> 
</html>

 文字の書き換えとタイマーを組み合わせると、現在時刻を表示するリアルタイムクロックのようなプログラムを作成できます(サンプル13)。

【図21】fig21.png

リアルタイムにSVGで時計が表示される

サンプル13[HTML]

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8" /> 
<title>JavaScriptでSVGクロック</title> 
</head> 
<body>
<h1>JavaScriptでSVGクロック</h1>
<svg width="100%" height="300">
<text id="myText" x="5" y="18">00:00:00</text>
</svg>
<script type="text/javascript">
setInterval(function(){
var dateObj = new Date();
var h = "0"+dateObj.getHours();
var m = "0"+dateObj.getMinutes();
var s = "0"+dateObj.getSeconds();
h = h.substr(h.length-2, 2);
m = m.substr(m.length-2, 2);
s = s.substr(s.length-2, 2);
var txt = document.getElementById("myText");    // SVGテキスト
txt.textContent = h+":"+m+":"+s;
txt.setAttribute("transform", "scale(5)");
}, 1000);
</script>
</body> 
</html> 

 次回は、SVGアニメーションとSVGを使ったゲームを作成します。お楽しみに。

前へ 1 2 3 4 5 次へ

この連載の記事

一覧へ
Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く