From 581e510feeaf32979e3df0f5c0b7ea024b323cb2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=92=AC=E8=BD=AE=E7=8C=AB?= <10928033@qq.com>
Date: Wed, 22 Dec 2021 21:29:15 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=85=BC=E5=AE=B9css?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                             | 25 +++++++++++++++++++++++++
 package.json                          |  2 +-
 src/assets/css/svgAnimation/index.css |  8 ++++++++
 3 files changed, 34 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index f8994d5..3c38a21 100644
--- a/README.md
+++ b/README.md
@@ -16,6 +16,31 @@ https://github.com/yaolunmao/vue-webtopo-svgeditor
 
 https://gitee.com/yaolunmao/vue-webtopo-svgeditor
 
+## 这个项目都能干什么
+
+目前我用来绘制物联网监控系统图
+
+电力监控系统图
+
+![电力监控系统图](https://images.cnblogs.com/cnblogs_com/Hero-/2077550/o_211211075750_%E7%94%B5%E5%8A%9B%E9%A2%84%E8%A7%88.gif)
+
+水务系统图
+
+![水务系统图](https://images.cnblogs.com/cnblogs_com/Hero-/2077550/o_211222131344_shuiwu.gif)
+
+但不仅仅局限于这些，只要是svg矢量图标都可以作为组件进行拖拽组态
+
+
+
+## 优点
+
+- **学习成本极低**：核心代码仅500多行
+- **添加组件无需修改代码**：只要在json里新增一项就可
+- **轻量**：组件打包只有1MB
+- **易拓展**：按照我定义好的格式，只需要在json里面定义好属性，便可以动态修改svg组件的任意节点
+- **易于集成**：组件已经发布到npm，只需要引用到现有项目将组件数据传给组件即可使用
+- **免费**：MIT开源协议 可商用
+
 ## 如何引用
 
 ```
diff --git a/package.json b/package.json
index 4dd464b..5fc44b9 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-webtopo-svgeditor",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "files": [
     "dist"
   ],
diff --git a/src/assets/css/svgAnimation/index.css b/src/assets/css/svgAnimation/index.css
index 280b218..d75b60f 100644
--- a/src/assets/css/svgAnimation/index.css
+++ b/src/assets/css/svgAnimation/index.css
@@ -4,6 +4,8 @@
   stroke-dashoffset: 1000;
   animation: ani_flow 10s linear infinite;
   animation-fill-mode: forwards;
+  -webkit-animation: ani_flow 10s linear infinite;
+  -webkit-animation-fill-mode: forwards;
 }
 
 @keyframes ani_flow {
@@ -31,6 +33,8 @@
   stroke-dashoffset: 1000;
   animation: ani_flow_stop 10s linear infinite;
   animation-fill-mode: forwards;
+  -webkit-animation: ani_flow_stop 10s linear infinite;
+  -webkit-animation-fill-mode: forwards;
 }
 
 @keyframes ani_flow_stop {
@@ -57,6 +61,8 @@
   stroke-dashoffset: 1000;
   animation: ani_flow_back 10s linear infinite;
   animation-fill-mode: forwards;
+  -webkit-animation: ani_flow_back 10s linear infinite;
+  -webkit-animation-fill-mode: forwards;
 }
 
 @keyframes ani_flow_back {
@@ -81,6 +87,8 @@
 .svg_ani_fill_h40 {
   animation: ani_fill_h40 5s linear infinite;
   animation-fill-mode: forwards;
+  -webkit-animation: ani_fill_h40 5s linear infinite;
+  -webkit-animation-fill-mode: forwards;
 }
 
 @keyframes ani_fill_h40 {