gcchaan/svg_path_previewer.html

## svg_path_previewer.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8" />
    <title>SVGプレビュワー</title>
    <script src="jquery-2.0.3.min.js"></script>
    <script>
        $(function(){
            $('textarea').bind('keypress blur change',function(){
                $('path').attr("d",$(this).val());
                getSvgBBox();
                var vectorsize = bbox.x+" "+bbox.y+" "+bbox.width+" "+bbox.height;
                $('svg')[0].setAttribute("viewBox",vectorsize);
            });
        });
        function getSvgBBox(){
            var svgElement = document.getElementById('bbox');
            bbox = svgElement.getBBox();
        }
    </script>
</head>
<body>
    <header><h1>SVGプレビュワー</h1></header>
    <article>
    <form>
    <p>ベクターのpathを入力してください</p>
    <textarea></textarea>
    </form>
    <svg width="300" height="300">
        <path id="bbox" stroke="#555" fill="#FFF" d />
    </svg>
    </article>
</body>
</html>
	<!DOCTYPE html>
	<html lang="ja">
	<head>
	<meta charset="utf-8" />
	<title>SVGプレビュワー</title>
	<script src="jquery-2.0.3.min.js"></script>
	<script>
	$(function(){
	$('textarea').bind('keypress blur change',function(){
	$('path').attr("d",$(this).val());
	getSvgBBox();
	var vectorsize = bbox.x+" "+bbox.y+" "+bbox.width+" "+bbox.height;
	$('svg')[0].setAttribute("viewBox",vectorsize);
	});
	});
	function getSvgBBox(){
	var svgElement = document.getElementById('bbox');
	bbox = svgElement.getBBox();
	}
	</script>
	</head>
	<body>
	<header><h1>SVGプレビュワー</h1></header>
	<article>
	<form>
	<p>ベクターのpathを入力してください</p>
	<textarea></textarea>
	</form>
	<svg width="300" height="300">
	<path id="bbox" stroke="#555" fill="#FFF" d />
	</svg>
	</article>
	</body>
	</html>