七夕节，到了，各位同学，有没有暗恋的人啊，趁这个机会表白啊~

what？不好意思开口？

没关系，我们来用SVG做个表白动画，让对方知道我们在想她（他）。

啥？还不知道SVG是啥？简单来讲，是在页面中使用矢量图形。它的英文全称为Scalable Vector Graphics，意思为可缩放的矢量图形。只是它可用图形编辑工具生成，也可以用代码编辑器生成，是不是很牛逼？？所以，方便我们这些程序员在上面做“手脚”。

先看效果：

第一步，先用adobe illustrator ，用“铅笔”工具写下你想说的话。

这里，我就写了两个字“想你”。

表白，这个事情，不在乎文字多少，要让对方知道你的想法才是重点，她知道了后，再约嘛。咳咳~偏题了。

之所以选择“铅笔”工具，是因为这里要用到SVG的路径。路径画出来的，才是线条~！！！

写完文字后，用“文件--文档设置”调整下画布大小，跟文字相匹配。免得空白地方太多。

然后，把整个文档另存为SVG格式。千万不要是其他格式~切记~！！！

第二步，把SVG重命名下，不要中文名字。放在站点里。

把SVG文件，用webstorm打开，把里面的代码复制到HTML文档中。

注意：去掉 xml的头。

<?xml version="1.0" encoding="utf-8"?>

以及 SVG标签中的：

xmlns:xlink="http://www.w3.org/1999/xlink"

这不符合HTML的规范。

同时，给这个SVG标签，起一个id，这里是“missyou”。

我的这个SVG代码如下：

<svg version="1.1" id="missyou" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"viewBox="0 0 682 299" width="800"><path class="st0" d="M15.7,101.7c54,23.8,117.2,25.7,172.5,5.1c13.1-4.9,26-11.1,36.4-20.4c10.4-9.3,18.3-22.1,19.6-36c0.5-5.5-0.4-11.8-5-14.9c-5.2-3.6-12.7-0.9-16.6,4c-3.9,4.9-5,11.4-5.9,17.6c-5.2,35-7.4,70.4-6.6,105.7"></path><path class="st0" d="M126.8,170.4C201,152,209.1,99,212.5,98.5c9.5,23.5,23.5,53.5,69.4,53"></path><path class="st0" d="M281,73c-15,7-29,45,41.8,79C392,106,354,42,315,78C307.3,85.1,291.9,67.9,281,73z"></path><path class="st0" d="M170,186.1c-4.4,21.1-9.9,41.9-16.5,62.3"></path><path class="st0" d="M202.8,184c3.2,33.2,23.6,64.2,52.7,80.4c29.1,16.2,66.5,17.7,96.2,2.4c38.3-19.8,6.4-60.1-7.9-72.4c-14.3-12.3-34.1-17.8-52.7-14.7c-4.3,0.7-8.6,1.9-12.1,4.6c-7.1,5.4-9,15.9-6.1,24.3c3,8.4,9.9,14.9,17.5,19.6c21.6,13.1,50.7,12.5,71.7-1.5c14-9.3,24.1-23.6,37.6-33.6c3.6-2.7,8.1-5.1,12.4-3.8c3,0.9,5.2,3.4,7.1,5.9c5.6,7.3,6.8,35-24.2,52"></path><path class="st0" d="M489,33.4c-1.7,23.5-11.6,46.4-27.6,63.8c-16,17.4-38,29.1-61.3,32.7"></path><path class="st0" d="M464,95c5.8,4.5,10,13.5,12.5,23.3s3.5,20.6,4.1,31.3c2.1,32.4,2,65.2-0.3,97.5"></path><path class="st0" d="M542.8,22.5c8.6,17.3,10.6,37.7,5.4,56.3c-5.1,18.6-17.4,35.1-33.6,45.5"></path><path class="st0" d="M549,82.1c26.2-17,55.4-27.4,85.1-30.3c2.6-0.3,5.3-0.4,7.8,0.6c5,2.1,36.1,12.6-14.6,60.7"></path><path class="st0" d="M581,64.7c14.4,51.5,15.5,106.7,3.2,158.8c-1.8,7.7-4.4,16-11,20.3c-10.8,7-24.6-0.4-37-3.9"></path><path class="st0" d="M549,142.7c8,20.3-9,59.3-34.5,71.8"></path><path class="st0" d="M609.5,122.5C665,145,668,186,649,220"></path>
</svg>

看的头大，所以，SVG的图形生成，最好还是用 Ilustrator 之类的软件的好。

哦，对了，AI 这个软件生成SVG的时候，会单独生成相关的样式。单独提出来~

<style>.st0{fill:none;    /* 填充色无 */stroke:#000000;   /* 线条色 */stroke-width:4;    /* 线条粗细 */stroke-miterlimit:10;   /* 线条交叉圆润度 */}
</style>

SVG的CSS跟一般HTML标签的CSS类似，但是也有不同的地方，它也有新的CSS。具体大家百度，我这里就不写了。

写JavaScript代码

哇哦，马上就好了。剩下的就是JS了。

let cssStyle = document.styleSheets[0];   // 找到页面的样式表
let  svg = document.getElementById("missyou");  // 找到SVG标签
let pathes = svg.querySelectorAll("path");  // 找到SVG中的路径，也就是笔画。
let lengArr = [];     // 每个路径，每个笔画的长度不一。所以用个空数组来装它们。
console.info(pathes.length);   // 可以看到，我这里有 12 笔完成这两个字。
for(let i=0 ;  i<= pathes.length-1 ; i++){lengArr[lengArr.length] = pathes[i].getTotalLength();   // 获取每个笔画的长度。这个很重要。
}
for(let i=1 ;  i<= pathes.length ; i++){  // 从1 开始循环，因为，css中:nth-child找标签是从1开始的。// 对每个笔画都写不同的动画样式。因为它们的长度不一。//  利用 样式表标签的 insertRule 函数，可以插入样式。// 为了方便样式排版，我这里用了ES6的模版字符串。不知道怎么回事的百度吧。// 模版字符串好处：1，可以多行排版；2，可以写变量 ，放在 ${} 里。cssStyle.insertRule(`@keyframes lineMove${i} {0% {stroke-dasharray: 0, ${lengArr[i-1]};}100% {stroke-dasharray: ${lengArr[i-1]}, ${lengArr[i-1]};}}`);// 对每个笔画添加对应的动画样式。动画时间都是0.5s，也依次延后对应0.5s。cssStyle.insertRule(`path:nth-child(${i}){animation: lineMove${i} 0.5s ${(i)*0.5}s both;}`);
}

完工。

总结下知识点：

1. 这个特效，用到了CSS的查找。

let cssStyle = document.styleSheets[0];     // 找到页面的样式表

可以找页面内嵌入的style标签，也可以找外部的样式文件。

因为页面可以能引入多个样式文件，或者存在多个样式表。所以，styleSheets 是个数组，根据先后顺序可以找到我们需要的样式文件。

然后用JS动态生成了CSS代码。

cssStyle.insertRule(  CSS规则 )

直接把CSS规则写在 insertRule 括号里就行。

跟标签的 style 属性不同的是，它写的是个完整的样式条目。而不是某些个属性。

   cssStyle.insertRule(`path:nth-child(${i}){animation: lineMove${i} 0.5s ${(i)*0.5}s both;}`);

为了方便编码，推荐使用 ES6 的模版字符串。

2. SVG代码中找标签的方法，跟HTML找标签的方法一致。

let pathes = svg.querySelectorAll("path");  // 找到SVG中的路径，也就是笔画。

3. SVG的线条，也就是path路径，获取长度

 pathes[i].getTotalLength();   // 获取每个笔画的长度。这个很重要。

这个动画能成的核心道理是，利用了SVG线条的

stroke-dasharray

这个属性，它的作用是让线条成为【实线，虚线，实线，虚线。。。】的线段。开始把实线段设为0，虚线段跟线条一样长。通过动画，让实线段变长，就形成了写字效果。

其他的看注释吧。这里不解释了，毕竟表白才是头等大事。。。嘿嘿~

妙用SVG，给自己暗恋的人表白吧~相关推荐

夜来香——暗恋的滋味
世界上最远的距离,不是,生与死,而是我就站在你面前,而你却不知道,我爱你 ----泰戈尔李碧华说自己最想旅游的地方是:暗恋者的心.她心里一定暗恋过别人,否则怎么会知道那里气象万千充满甜蜜的痛苦,最值 ...
苹果 python蚂蚁森林自动收能量_Python自动化收取蚂蚁森林能量,不错过暗恋的她...
作者 | 锅g头来源 | Crossin的编程教室最近在家远程工作,结果作息更混乱了 ,早上起不来,导致我蚂蚁森林能量天天被偷,严重影响我沙漠造树"大业" .于是我决定用pyth ...
暗恋云匹配匿名交友聊天系统开发
暗恋云匹配匿名交友聊天系统开发软件背景事实上,大部分恋爱,都发生在身边的熟人,而他们,大部分时间,都偷偷地喜欢着对方.暗恋是刚需,而捅破暗恋这层纸,是刚需中的刚需. 软件简介暗恋匹配,让用户可以 ...
Python 自动化收取蚂蚁森林能量，不错过暗恋的她（附源码）
作者 | 锅g头来源 | Crossin的编程教室最近在家远程工作,结果作息更混乱了,早上起不来,导致我蚂蚁森林能量天天被偷,严重影响我沙漠造树"大业".于是我决定用pytho ...
帮我写一封暗恋了好多年女孩的表白信
当然,我可以帮您写一封暗恋女孩的表白信.以下是一份可能的信件,仅供参考: 亲爱的[女孩的名字], 我一直很喜欢你,这个喜欢已经持续了好多年.我一直在想要如何向你表达我的感情,但是我一直担心会被你拒绝或 ...
判断奇偶microsoft visual basic_#梅园# 在心理学上面如何判断一个男生暗恋你的表现...
都知道暗恋其实是比较痛苦的一件事情,因为暗恋只有自己一个人知道对方并不知道,但是有时候可以通过一个人的表现看出他是不是暗恋你,那一个男生暗恋你的表现都有哪些呢?如果一个男生暗恋你的话,你会发现他总会在 ...
[蓝桥杯][算法训练VIP]暗恋（二维树状数组）
题目描述同在一个高中,他却不敢去找她,虽然在别人看来,那是再简单不过的事.暗恋,是他唯一能做的事.他只能在每天课间操的时候,望望她的位置,看看她倾心的动作,就够了.操场上的彩砖啊,你们的位置,就是 ...
博士在读时，把暗恋的师兄变成了老公是种怎样的体验？
现已博士毕业六年,老公与我今年刚评上副教授,六年生了两个宝宝,没人带,两人互相扶持,今年才刚攒够评职称条件,当然基金两人早早就有,只是不努力文章和其他条件没凑够,不能怨孩子,不能怨父母. >&g ...
蓝桥杯 ALGO-112 算法训练暗恋
问题描述同在一个高中,他却不敢去找她,虽然在别人看来,那是再简单不过的事.暗恋,是他唯一能做的事.他只能在每天课间操的时候,望望她的位置,看看她倾心的动作,就够了.操场上的彩砖啊,你们的位置,就是他 ...

妙用SVG，给自己暗恋的人表白吧~