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>