<!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