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

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

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-36
        c0.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.4
        c-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.6
        c21.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，虚线段跟线条一样长。通过动画，让实线段变长，就形成了写字效果。

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