Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment