|
|
|
|
@ -2,32 +2,74 @@
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="utf-8" />
|
|
|
|
|
<title>改变状态</title>
|
|
|
|
|
<title>从Svg字符中生成</title>
|
|
|
|
|
<script src="Scripts/SnapSVG/snap.svg.js"></script>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<div id="SvgShow" style="border:1px solid red;">
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div style="margin-top:20px;border:solid 1px blue;">
|
|
|
|
|
<input id="btn_start" type="button" value="启动" />
|
|
|
|
|
<input id="btn_stop" type="button" value="停止" />
|
|
|
|
|
<div style="border:1px solid red;margin-top:10px;">
|
|
|
|
|
<input id="btn_SvgString" type="button" value="获取SVG当前字符串" />
|
|
|
|
|
<input id="btn_Start" type="button" value="设置为运行状态" />
|
|
|
|
|
<input id="btn_End" type="button" value="设置为停止状态" />
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<pre>
|
|
|
|
|
操作后的Svg字符串，如下：
|
|
|
|
|
</pre>
|
|
|
|
|
<pre id="SvgShowString" style="border:1px solid red;margin-top:10px;">
|
|
|
|
|
xxxxxx
|
|
|
|
|
</pre>
|
|
|
|
|
</body>
|
|
|
|
|
<script>
|
|
|
|
|
//加载现在svg文件
|
|
|
|
|
<script>
|
|
|
|
|
|
|
|
|
|
//存储从SVG文件中获取的原始字符串
|
|
|
|
|
var SvgDemeString = "";
|
|
|
|
|
|
|
|
|
|
Snap.load('/Svgs/towerd.svg', function (g) {
|
|
|
|
|
//显示
|
|
|
|
|
Snap('#SvgShow').append(g);
|
|
|
|
|
//获取Svg文件字符串，存储
|
|
|
|
|
SvgDemeString = g.node.outerHTML;
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
document.getElementById("btn_start").onclick = function () {
|
|
|
|
|
Snap('#SvgShow').select("#SVG_ani").attr({ style: "display:block;" });
|
|
|
|
|
document.getElementById("btn_SvgString").onclick = function () {
|
|
|
|
|
//原字符中显示在下放pre内
|
|
|
|
|
document.getElementById("SvgShowString").innerText = SvgDemeString;
|
|
|
|
|
|
|
|
|
|
//显示svg效果
|
|
|
|
|
document.getElementById("SvgShow").innerHTML = SvgDemeString;
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
document.getElementById("btn_stop").onclick = function () {
|
|
|
|
|
Snap('#SvgShow').select("#SVG_ani").attr({ style: "display:none;" });
|
|
|
|
|
document.getElementById("btn_Start").onclick = function () {
|
|
|
|
|
var fragment = Snap.parse(SvgDemeString);
|
|
|
|
|
|
|
|
|
|
//设置属性
|
|
|
|
|
fragment.select("#SVG_ani").attr({ style: "display:block;" });
|
|
|
|
|
|
|
|
|
|
//获取操作后的Svg字符串
|
|
|
|
|
var svgString = fragment.node.outerHTML;
|
|
|
|
|
|
|
|
|
|
//原字符中显示在下放pre内
|
|
|
|
|
document.getElementById("SvgShowString").innerText = svgString;
|
|
|
|
|
|
|
|
|
|
//显示svg效果
|
|
|
|
|
document.getElementById("SvgShow").innerHTML = svgString;
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
document.getElementById("btn_End").onclick = function () {
|
|
|
|
|
var fragment = Snap.parse(SvgDemeString);
|
|
|
|
|
|
|
|
|
|
//设置属性
|
|
|
|
|
fragment.select("#SVG_ani").attr({ style: "display:none;" });
|
|
|
|
|
|
|
|
|
|
//获取操作后的Svg字符串
|
|
|
|
|
var svgString = fragment.node.outerHTML;
|
|
|
|
|
|
|
|
|
|
//原字符中显示在下放pre内
|
|
|
|
|
document.getElementById("SvgShowString").innerText = svgString;
|
|
|
|
|
|
|
|
|
|
//显示svg效果
|
|
|
|
|
document.getElementById("SvgShow").innerHTML = svgString;
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
</script>
|
|
|
|
|
</html>
|
