0
我对ajax和json不是很熟悉，但这是如何使用扩展名生成代码。使用Adobe Animate CC的SnapSVGAnimator扩展...我如何才能将SVGdom变成特定的div？
这里是输出...
<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 = "test.json",
fps = 24,
width = 1000,
height = 1000,
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
);
}
}
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>
这里是JSON
{
"DOMDocument" : {
"Shape" : [
{
"charid" : "1",
"path" : [
{
"color" : "#0066cc",
"colorOpacity" : "1",
"d" : "M 92.15 92.15 q 15.85 -15.8 15.85 -38.15 q 0 -22.35 -15.85 -38.2 q -15.8 -15.8 -38.15 -15.8 q -22.35 0 -38.2 15.8 q -15.8 15.85 -15.8 38.2 q 0 22.35 15.8 38.15 q 15.85 15.85 38.2 15.85 q 22.35 0 38.15 -15.85 ",
"pathType" : "Fill",
"stroke" : "none"
}
]
}
],
"Bitmaps" : [],
"Sounds" : [],
"Text" : [],
"Timeline" : [
{
"charid" : "2",
"frameCount" : "1",
"name" : "Ball",
"Frame" : [
{
"num" : "0",
"Command" : [
{
"cmdType" : "Place",
"charid" : "1",
"objectId" : "1",
"placeAfter" : "0",
"transformMatrix" : "1,0,0,1,0,0"
}
]
}
]
},
{
"frameCount" : "35",
"Frame" : [
{
"num" : "0",
"Command" : [
{
"cmdType" : "Place",
"charid" : "2",
"objectId" : "1",
"placeAfter" : "0",
"transformMatrix" : "1,0,0,1,177,212.95",
"name" : "Ball"
},
{
"cmdType" : "UpdateColorTransform",
"objectId" : "1",
"colorMatrix" : "1,0,1,0,1,0,1,0,"
},
{
"cmdType" : "UpdateVisibility",
"objectId" : "1",
"visibility" : "true"
},
{
"cmdType" : "UpdateBlendMode",
"objectId" : "1",
"blendMode" : "Normal"
}
]
},
{
"num" : "1",
"Command" : [
{
"cmdType" : "Move",
"objectId" : "1",
"transformMatrix" : "1.08363,0,0,1.08366,187.65312,224.21623"
}
]
},
{
"num" : "2",
"Command" : [
{
"cmdType" : "Move",
"objectId" : "1",
"transformMatrix" : "1.16728,0,0,1.16733,198.30893,235.43248"
}
]
},
{
"num" : "3",
"Command" : [
{
"cmdType" : "Move",
"objectId" : "1",
"transformMatrix" : "1.25093,0,0,1.25099,208.91475,246.64871"
}
]
},
{
"num" : "4",
"Command" : [
{
"cmdType" : "Move",
"objectId" : "1",
"transformMatrix" : "1.33458,0,0,1.33466,219.57057,257.91495"
}
]
},
{
"num" : "5",
"Command" : [
{
"cmdType" : "Move",
"objectId" : "1",
"transformMatrix" : "1.41821,0,0,1.41832,230.17368,269.1312"
}
]
},
{
"num" : "6",
"Command" : [
{
"cmdType" : "Move",
"objectId" : "1",
"transformMatrix" : "1.50186,0,0,1.50198,240.8295,280.34741"
}
]
},
{
"num" : "7",
"Command" : [
{
"cmdType" : "Move",
"objectId" : "1",
"transformMatrix" : "1.58551,0,0,1.58565,251.43532,291.61365"
}
]
},
{
"num" : "8",
"Command" : [
{
"cmdType" : "Move",
"objectId" : "1",
"transformMatrix" : "1.66916,0,0,1.66931,262.09113,302.8299"
}
]
},
{
"num" : "9",
"Command" : [
{
"cmdType" : "Move",
"objectId" : "1",
"transformMatrix" : "1.75281,0,0,1.75298,272.74695,314.04611"
}
]
},
{
"num" : "10",
"Command" : [
{
"cmdType" : "Move",
"objectId" : "1",
"transformMatrix" : "1.83644,0,0,1.83664,283.35004,325.31238"
}
]
},
{
"num" : "11",
"Command" : [
{
"cmdType" : "Move",
"objectId" : "1",
"transformMatrix" : "1.92009,0,0,1.9203,294.00589,336.52859"
}
]
},
{
"num" : "12",
"Command" : [
{
"cmdType" : "Move",
"objectId" : "1",
"transformMatrix" : "2.00374,0,0,2.00397,304.61169,347.74481"
}
]
},
{
"num" : "13",
"Command" : [
{
"cmdType" : "Move",
"objectId" : "1",
"transformMatrix" : "2.08739,0,0,2.08763,315.26752,359.01105"
}
]
},
{
"num" : "14",
"Command" : [
{
"cmdType" : "Move",
"objectId" : "1",
"transformMatrix" : "2.17104,0,0,2.1713,325.87332,370.22729"
}
]
},
{
"num" : "15",
"Command" : [
{
"cmdType" : "Move",
"objectId" : "1",
"transformMatrix" : "2.25467,0,0,2.25497,336.52646,381.49677"
}
]
},
{
"num" : "16",
"Command" : [
{
"cmdType" : "Move",
"objectId" : "1",
"transformMatrix" : "2.33832,0,0,2.33864,347.13226,392.76303"
}
]
},
{
"num" : "17",
"Command" : [
{
"cmdType" : "Move",
"objectId" : "1",
"transformMatrix" : "2.42197,0,0,2.4223,357.78809,403.97928"
}
]
},
{
"num" : "18",
"Command" : [
{
"cmdType" : "Move",
"objectId" : "1",
"transformMatrix" : "2.50562,0,0,2.50597,368.44391,415.1955"
}
]
},
{
"num" : "19",
"Command" : [
{
"cmdType" : "Move",
"objectId" : "1",
"transformMatrix" : "2.58926,0,0,2.58963,379.04971,426.41174"
}
]
},
{
"num" : "20",
"Command" : [
{
"cmdType" : "Move",
"objectId" : "1",
"transformMatrix" : "2.6729,0,0,2.67329,389.70285,437.67795"
}
]
},
{
"num" : "21",
"Command" : [
{
"cmdType" : "Move",
"objectId" : "1",
"transformMatrix" : "2.75655,0,0,2.75696,400.30862,448.89417"
}
]
},
{
"num" : "22",
"Command" : [
{
"cmdType" : "Move",
"objectId" : "1",
"transformMatrix" : "2.84019,0,0,2.84062,410.96448,460.11047"
}
]
},
{
"num" : "23",
"Command" : [
{
"cmdType" : "Move",
"objectId" : "1",
"transformMatrix" : "2.92384,0,0,2.92429,421.57025,471.37668"
}
]
},
{
"num" : "24",
"Command" : [
{
"cmdType" : "Move",
"objectId" : "1",
"transformMatrix" : "3.00749,0,0,3.00795,432.2261,482.5929"
}
]
},
{
"num" : "25",
"Command" : [
{
"cmdType" : "Move",
"objectId" : "1",
"transformMatrix" : "3.09113,0,0,3.09161,442.82922,493.80914"
}
]
},
{
"num" : "26",
"Command" : [
{
"cmdType" : "Move",
"objectId" : "1",
"transformMatrix" : "3.17477,0,0,3.17528,453.48505,505.07535"
}
]
},
{
"num" : "27",
"Command" : [
{
"cmdType" : "Move",
"objectId" : "1",
"transformMatrix" : "3.25842,0,0,3.25894,464.14084,516.29163"
}
]
},
{
"num" : "28",
"Command" : [
{
"cmdType" : "Move",
"objectId" : "1",
"transformMatrix" : "3.34207,0,0,3.34261,474.74664,527.50787"
}
]
},
{
"num" : "29",
"Command" : [
{
"cmdType" : "Move",
"objectId" : "1",
"transformMatrix" : "3.42572,0,0,3.42628,485.40247,538.82733"
}
]
},
{
"num" : "30",
"Command" : [
{
"cmdType" : "Move",
"objectId" : "1",
"transformMatrix" : "3.25221,0,0,3.25276,496.8916,551.22559"
}
]
},
{
"num" : "31",
"Command" : [
{
"cmdType" : "Move",
"objectId" : "1",
"transformMatrix" : "3.0787,0,0,3.07925,508.43079,563.67719"
}
]
},
{
"num" : "32",
"Command" : [
{
"cmdType" : "Move",
"objectId" : "1",
"transformMatrix" : "2.9052,0,0,2.90575,519.91992,576.17871"
}
]
},
{
"num" : "33",
"Command" : [
{
"cmdType" : "Move",
"objectId" : "1",
"transformMatrix" : "2.73169,0,0,2.73224,531.50903,588.63025"
}
]
},
{
"num" : "34",
"Command" : [
{
"cmdType" : "Move",
"objectId" : "1",
"transformMatrix" : "2.73169,0,0,2.73224,520.70001,578.25"
}
]
}
]
}
]
}
}
随着包括JS和卡扣SVG JS，它工作得很好，我只是想成为能够把它放到div（或画布）中！
结果是在这里：http://centpourcent.us/cca/05/test.html
HELP！