From 78fa3ea48b6b89b72d9e5718a6274f4a0830d716 Mon Sep 17 00:00:00 2001
From: bicijinlian <bicijinlian@163.com>
Date: Thu, 26 Nov 2020 14:02:27 +0800
Subject: [PATCH] =?UTF-8?q?=E6=93=8D=E4=BD=9CSvg=E5=AD=97=E7=AC=A6?=
 =?UTF-8?q?=E4=B8=B2=EF=BC=8C=E8=BF=94=E5=9B=9E=E6=93=8D=E4=BD=9C=E5=90=8E?=
 =?UTF-8?q?=E7=9A=84Svg=E5=AD=97=E7=AC=A6=E4=B8=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 SnapSvgStudy/wwwroot/SvgString.html  | 84 +++++++++++++++++++++-------
 SnapSvgStudy/wwwroot/Svgs/towerd.svg |  2 +-
 SnapSvgStudy/wwwroot/说明.md       |  9 +++
 3 files changed, 73 insertions(+), 22 deletions(-)
 create mode 100644 SnapSvgStudy/wwwroot/说明.md
diff --git a/SnapSvgStudy/wwwroot/SvgString.html b/SnapSvgStudy/wwwroot/SvgString.html
index 5eea7e4..e1694fe 100644
--- a/SnapSvgStudy/wwwroot/SvgString.html
+++ b/SnapSvgStudy/wwwroot/SvgString.html
@@ -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文件
-        Snap.load('/Svgs/towerd.svg', function (g) {
-            //显示
-            Snap('#SvgShow').append(g);
-        });
-
-        document.getElementById("btn_start").onclick = function () {
-            Snap('#SvgShow').select("#SVG_ani").attr({ style: "display:block;" });
-        };
-
-        document.getElementById("btn_stop").onclick = function () {
-            Snap('#SvgShow').select("#SVG_ani").attr({ style: "display:none;" });
-        };
-    </script>
+<script>
+
+    //存储从SVG文件中获取的原始字符串
+    var SvgDemeString = "";
+
+    Snap.load('/Svgs/towerd.svg', function (g) {
+        //获取Svg文件字符串，存储
+       SvgDemeString = g.node.outerHTML;
+    });
+
+    document.getElementById("btn_SvgString").onclick = function () {
+        //原字符中显示在下放pre内
+        document.getElementById("SvgShowString").innerText = SvgDemeString;
+
+        //显示svg效果
+        document.getElementById("SvgShow").innerHTML = SvgDemeString;
+    };
+
+    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>
 </html>
\ No newline at end of file
diff --git a/SnapSvgStudy/wwwroot/Svgs/towerd.svg b/SnapSvgStudy/wwwroot/Svgs/towerd.svg
index 07c06f7..cb3cb31 100644
--- a/SnapSvgStudy/wwwroot/Svgs/towerd.svg
+++ b/SnapSvgStudy/wwwroot/Svgs/towerd.svg
@@ -1,4 +1,4 @@
-<svg version="1.1" id="lengqueta" xmlns="http://www.w3.org/2000/svg" width="96" height="107.4" viewBox="0 0 192 214.8">
+<svg version="1.1" id="lengqueta" encoding="UTF-8" xmlns="http://www.w3.org/2000/svg" width="96" height="107.4" viewBox="0 0 192 214.8">
 	<style type="text/css">.lqTa0{fill:url(#lqTa_1_);}.lqTa1{fill:url(#lqTa_2_);}.lqTa2{fill:#D0E2D8;}.lqTa3{fill:#74AD92;}.lqTa4{fill:#47775B;}.lqTa5{fill:#82C0A5;}.lqTa6{fill:url(#lqTa_3_);stroke:url(#lqTa_4_);stroke-miterlimit:10;}.lqTa7{fill:url(#lqTa_5_);stroke:url(#lqTa_6_);stroke-miterlimit:10;}.lqTa8{fill:url(#lqTa_7_);stroke:url(#lqTa_8_);stroke-miterlimit:10;}.lqTa9{fill:url(#lqTa_9_);stroke:url(#lqTa_10_);stroke-miterlimit:10;}.lqTa10{fill:url(#lqTa_11_);stroke:url(#lqTa_12_);stroke-miterlimit:10;}.lqTa11{fill:url(#lqTa_13_);stroke:url(#lqTa_14_);stroke-miterlimit:10;}.lqTa12{fill:url(#lqTa_15_);stroke:url(#lqTa_16_);stroke-miterlimit:10;}.lqTa13{fill:url(#lqTa_17_);stroke:url(#lqTa_18_);stroke-miterlimit:10;}.lqTa14{fill:#679980;}.lqTa15{fill:#73A88E;}.lqTa16{fill:url(#lqTa_19_);stroke:url(#lqTa_20_);stroke-miterlimit:10;}.lqTa17{fill:url(#lqTa_21_);stroke:url(#lqTa_22_);stroke-miterlimit:10;}.lqTa18{fill:url(#lqTa_23_);stroke:url(#lqTa_24_);stroke-miterlimit:10;}.lqTa19{fill:url(#lqTa_25_);stroke:url(#lqTa_26_);stroke-miterlimit:10;}.lqTa20{fill:url(#lqTa_27_);stroke:url(#lqTa_28_);stroke-miterlimit:10;}.lqTa21{fill:url(#lqTa_29_);stroke:url(#lqTa_30_);stroke-miterlimit:10;}.lqTa22{fill:url(#lqTa_31_);stroke:url(#lqTa_32_);stroke-miterlimit:10;}.lqTa23{fill:url(#lqTa_33_);stroke:url(#lqTa_34_);stroke-miterlimit:10;}.lqTa24{fill:#9FCEB7;}.lqTa25{fill:url(#lqTa_35_);}.lqTa26{fill:none;stroke:url(#lqTa_36_);stroke-width:2;stroke-linecap:round;stroke-miterlimit:10;}.lqTa27{fill:none;stroke:url(#lqTa_37_);stroke-width:2;stroke-linecap:round;stroke-miterlimit:10;}.lqTa28{fill:none;stroke:url(#lqTa_38_);stroke-width:2;stroke-linecap:round;stroke-miterlimit:10;}.lqTa29{fill:none;stroke:url(#lqTa_39_);stroke-width:2;stroke-linecap:round;stroke-miterlimit:10;}.lqTa30{fill:none;stroke:url(#lqTa_40_);stroke-width:2;stroke-linecap:round;stroke-miterlimit:10;}.lqTa31{fill:none;stroke:url(#lqTa_41_);stroke-width:2;stroke-linecap:round;stroke-miterlimit:10;}.lqTa32{fill:none;stroke:url(#lqTa_42_);stroke-width:2;stroke-linecap:round;stroke-miterlimit:10;}.lqTa33{fill:none;stroke:url(#lqTa_43_);stroke-width:2;stroke-linecap:round;stroke-miterlimit:10;}.lqTa34{fill:none;stroke:url(#lqTa_44_);stroke-width:2;stroke-linecap:round;stroke-miterlimit:10;}.lqTa35{fill:none;stroke:url(#lqTa_45_);stroke-width:2;stroke-linecap:round;stroke-miterlimit:10;}.lqTa36{fill:none;stroke:url(#lqTa_46_);stroke-width:2;stroke-linecap:round;stroke-miterlimit:10;}.lqTa37{fill:url(#lqTa_47_);}.lqTa38{fill:#E5E5E5;}.lqTa39{fill:url(#lqTa_48_);}.lqTa40{fill:url(#lqTa_49_);}.lqTa41{fill:url(#lqTa_50_);}.lqTa42{fill:#BCC9C1;}.hide{display:none;}.show {display:default;}.lqTa44{display:inline;fill:url(#lqTa_51_);}.lqTa45{fill:url(#lqTa_52_);}.lqTa46{display:inline;fill:url(#lqTa_53_);}.lqTa47{display:inline;fill:url(#lqTa_54_);}.lqTa48{display:inline;fill:url(#lqTa_55_);}.lqTa49{fill:#DAE8EF;}.lqTa50{fill:url(#lqTa_56_);}.lqTa51{fill:url(#lqTa_57_);}.lqTa52{display:inline;opacity:0.5;fill:#E71F19;enable-background:new  ;}</style>
 	<g id="SVG_base1">
 		<linearGradient id="lqTa_1_" gradientUnits="userSpaceOnUse" x1="6907.7998" y1="6987.5303" x2="6925.8398" y2="6987.5303" gradientTransform="matrix(1 0 0 1 -6877.3901 -6795.8955)">
diff --git a/SnapSvgStudy/wwwroot/说明.md b/SnapSvgStudy/wwwroot/说明.md
new file mode 100644
index 0000000..9d0982c
--- /dev/null
+++ b/SnapSvgStudy/wwwroot/说明.md
@@ -0,0 +1,9 @@
+﻿SnapSvg.js
+=============
+
+SnapSvg.js 是用于SVG的全新JavaScript库。Snap为Web开发人员提供了一个简洁，流线型，直观且功能强大的API，用于对现有SVG内容以及Snap生成的SVG内容进行动画处理。
+相关文档 
+[官网](http://snapsvg.io/) 
+[GitHub](https://github.com/adobe-webplatform/Snap.svg) 
+[文档汉化](https://www.zhangxinxu.com/GitHub/demo-Snap.svg/demo/basic/Snap.parse.php)
+[文档汉化Github](https://github.com/zhangxinxu/demo-Snap.svg)
\ No newline at end of file
