ics-ikeda/SnapSVGAnimator.html

## SnapSVGAnimator.html
<!DOCTYPE html>
        <html>
        <head>
        <style>
        svg{
            background-color: #FFFFFF;
        }
        </style>
        </head>

        <body>

    <script src="./SnapSVGAnimator/js/vendor/snap.svg/snap.svg-min.js"></script>
    <script src="./SnapSVGAnimator/js/SnapSVGAnimator.min.js"></script>

    <script type="text/javascript">
        var jsonfile = "02_Custom.json",
            fps = 20,
            width = 320,
            height = 270,
            AJAX_req;

    AJAX_JSON_Req(jsonfile);

    function handle_AJAX_Complete() {
        if( AJAX_req.readyState == 4 && AJAX_req.status == 200 )
        {
            json = JSON.parse(AJAX_req.responseText);
            comp = new SVGAnim(
                           json,
                           width,
                           height,
                           fps
                           );

            // ---------------------------------------------
            // SVG 要素を抜き出す
            var el = document.querySelector("svg");
            // 配置したい要素を探しだす
            var container = document.querySelector("#myContainer");
            // 要素を移動させる
            container.appendChild(el);
            // ---------------------------------------------
        }
    }

    function AJAX_JSON_Req( url )
    {
        AJAX_req = new XMLHttpRequest();
        AJAX_req.open("GET", url, true);
        AJAX_req.setRequestHeader("Content-type", "application/json");

        AJAX_req.onreadystatechange = handle_AJAX_Complete;
        AJAX_req.send();
    }

            </script>

            <!-- ================================ -->
            <!-- 移動先のコンテナー -->
            <div id="myContainer"></div>
        </body>
        </html>
	<!DOCTYPE html>
	<html>
	<head>
	<style>
	svg{
	background-color: #FFFFFF;
	}
	</style>
	</head>

	<body>

	<script src="./SnapSVGAnimator/js/vendor/snap.svg/snap.svg-min.js"></script>
	<script src="./SnapSVGAnimator/js/SnapSVGAnimator.min.js"></script>

	<script type="text/javascript">
	var jsonfile = "02_Custom.json",
	fps = 20,
	width = 320,
	height = 270,
	AJAX_req;

	AJAX_JSON_Req(jsonfile);

	function handle_AJAX_Complete() {
	if( AJAX_req.readyState == 4 && AJAX_req.status == 200 )
	{
	json = JSON.parse(AJAX_req.responseText);
	comp = new SVGAnim(
	json,
	width,
	height,
	fps
	);

	// ---------------------------------------------
	// SVG 要素を抜き出す
	var el = document.querySelector("svg");
	// 配置したい要素を探しだす
	var container = document.querySelector("#myContainer");
	// 要素を移動させる
	container.appendChild(el);
	// ---------------------------------------------
	}
	}

	function AJAX_JSON_Req( url )
	{
	AJAX_req = new XMLHttpRequest();
	AJAX_req.open("GET", url, true);
	AJAX_req.setRequestHeader("Content-type", "application/json");

	AJAX_req.onreadystatechange = handle_AJAX_Complete;
	AJAX_req.send();
	}

	</script>

	<!-- ================================ -->
	<!-- 移動先のコンテナー -->
	<div id="myContainer"></div>
	</body>
	</html>