HTML5 + SVG + JS の練習。　グリッド模様。

SVG JavaScript

HTML5でポリゴンぐるぐる回したいんだ。

動作確認 Crome, Firefox のみ。

とりあえず HTML を普通に用意。

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8" />
	<title>JavaScriptでSVGを制御(エレメントの指定)</title>
</head>
<body>
	<h4>HTML5 で作図</h3>
	
	<svg id="svgCanvas" width="500" height="500" version="1.1" xmlns="http://www.w3.org/2000/svg" style="border: solid #000000;">
	</svg>
</body>
</html>

グリッド計算とラインを描画

	function renderGrid(){
		var interval	= 50
			, canvas	= document.getElementById("svgCanvas")
			, toX		= canvas.width.baseVal.value
			, toY		= canvas.height.baseVal.value
			, lineColor = '#DDDDDD'
			, svgns = "http://www.w3.org/2000/svg";
		
		for(var i=0; i<toX/interval; i++ ){
			
			var element	= document.createElementNS(svgns, 'path');
			element.id = 'x' + i;
			
			element.style.stroke	= lineColor;
			element.setAttribute('d', "M" + i*interval + ' 0 L' + i*interval + ' ' + toY + ' Z');
			
			canvas.appendChild(element);
		}
		
		for(var i=0; i<toY/interval; i++ ){
			
			var element	= document.createElementNS(svgns, 'path');
			element.id = 'y' + i;
			
			element.style.stroke	= lineColor;
			element.setAttribute('d', "M0 " + i*interval + ' L' + toY  + ' ' + i*interval + ' Z');
			
			canvas.appendChild(element);
		}
	}
	renderGrid();

するとグリッド模様が描画される。


簡単じゃん！

var svgns = "http://www.w3.org/2000/svg";
var element	= document.createElementNS(svgns, 'path');

この部分は必須のようです。

最初は

var element	= document.createElement('path');

としていたら、何故か表示されませんでした。

ドキュメント読み込み、リファクタリングはこれから ...