SVG 签名动画 制作

Posted 2020-08-02

不知道哪天看到的一个朋友圈里面有发的什么什么免费教签名之类的，就看了下SVG，做这功能还不错。

主要用到的几个属性，需要自行百度一下，不详说  stroke-dashoffset ,  stroke-dasharray 主要这两个。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="800" width="800">
<path d="m40.995594,214.000244c0,0 1.000015,0 2.000034,0c3.000053,0 7.000122,0 16.000282,0c9.00016,0 21.111244,0.704391 36.000641,-2.000031c13.127121,-2.384338 23.844788,-5.45723 35.00061,-9.000168c10.867096,-3.451233 23.077621,-6.812241 33.000595,-11.000183c9.07399,-3.829636 14.436508,-7.439819 21.000366,-13.000229c5.395462,-4.570648 8.579849,-11.157074 11.000198,-17.000305c2.567169,-6.197678 5.000092,-12.000214 5.000092,-20.000351c0,-4.000076 0,-9.000168 0,-13.000229c0,-4.000076 -0.613846,-8.297142 -3.000061,-11.000198c-1.479858,-1.676361 -1.823776,-4.486343 -4.000076,-5.000092c-0.973267,-0.229752 -3.000046,0 -5.000076,0c-4.000076,0 -7.291977,-1.101685 -13.000229,1.000015c-5.471954,2.014694 -11.593079,6.106377 -18.00032,11.000198c-3.371719,2.575302 -9.195923,10.891907 -13.000229,18.00032c-3.165375,5.914566 -3.391785,14.1875 -5.000092,21.000366c-1.54126,6.52887 -3.000061,10.000183 -3.000061,17.000305c0,5.000092 0.498749,10.946915 1.000031,18.00032c0.425354,5.985016 0.054459,11.090424 1.000015,16.000275c1.018387,5.288086 2.67012,10.013809 3.000046,14.000259c0.501724,6.062149 0.533737,10.096771 2.000031,16.000275c1.524582,6.138168 2.486313,9.823929 3.000061,12.000214c0.68927,2.9198 0.692551,6.186127 2.000031,8.000153c0.82692,1.147278 0.617325,2.076141 1.000015,3.000031c0.541214,1.30661 2.000031,1.000031 3.000061,0c1.000015,-1 1.256516,-2.797028 2.000031,-4.000061c1.662521,-2.690063 1.486282,-3.823792 2.000046,-6.000092c0.229767,-0.973267 -0.320374,-4.025909 0,-6.000122c0.506546,-3.12149 1.415924,-5.761185 3.000046,-9.000153c1.389374,-2.840775 3.190338,-5.881622 5.000092,-9.000168c2.24472,-3.868057 6.620728,-7.925659 13.000229,-10.000168c5.784698,-1.881088 10.938156,-2.498337 17.000305,-3.000061c5.97966,-0.494904 9.000153,0 11.000183,0c1.000031,0 3.519531,2.038788 4.000076,5.000092c0.506546,3.121506 4.000076,6.000107 4.000076,11.000198c0,3.000046 0,7.000122 0,10.000183c0,4.000061 0.122192,7.007614 0,8.000137c-0.503784,4.092285 -1.149368,4.474335 -2.000046,5.000092c-1.902145,1.175598 -2.458847,2.30661 -3.000046,1c-1.530746,-3.695587 -0.187866,-12.077408 4.000076,-22.000381c3.829636,-9.07399 11.113693,-17.920609 16.000275,-25.000443c4.096298,-5.93483 9.229019,-9.729797 14.000244,-14.000244c2.10759,-1.886368 5.000092,-3.000046 7.000122,-3.000046c3.000061,0 4.259674,-0.985413 6.000107,0c5.074173,2.87294 6.953537,12.020355 10.000198,19.000336c3.939972,9.026611 6.375519,18.118393 8.000122,25.000443c1.453094,6.155472 3.69455,11.082825 6.000122,19.000336c0.884155,3.036224 1.493469,6.878662 2.000031,10.000183c0.320374,1.974213 -0.070587,0.979431 2.000031,-6.000122c3.868561,-13.039963 8.738647,-25.955139 16.000275,-40.000702c5.375549,-10.397522 9.384766,-20.349792 13.000244,-26.000458c3.45105,-5.393677 5.346283,-9.705627 7.000122,-12.000214c1.307465,-1.814026 0.798615,-0.95549 2.000031,4.000061c1.715302,7.075287 3.000061,13.000229 3.000061,20.000366c0,7.000122 0,12.000214 0,16.000275c0,5.000092 0,8.000137 0,9.000168c0,1.000015 0,-4.000076 0,-13.000229c0,-9.000168 0,-18.00032 0,-28.000504c0,-11.000198 2.864044,-19.800461 5.000092,-31.000549c1.696472,-8.895203 1.732117,-17.043839 3.000031,-24.000427c1.653168,-9.070282 2.881409,-14.025444 4.000092,-19.000336c0.904572,-4.02272 1.917572,-9.056801 4.000061,-12.000206c2.887909,-4.081779 3.337555,-6.31012 5.000092,-9.00016c1.48703,-2.406044 3.797058,-4.256584 5.000092,-5.000092c2.690063,-1.662529 6.000092,-2.000038 8.000122,-2.000038c1.000031,0 3.000061,0 5.000092,0c2.000061,0 3.566589,0.134499 7.000122,3.000053c3.838837,3.203796 6.000122,9.000168 10.000183,14.000252c4.000092,5.000092 9.000153,12.000214 14.000244,22.000389c3.000061,6.000107 8.219208,15.424042 12.000214,25.000443c3.028381,7.670151 4.610352,18.238708 7.000122,28.000488c2.561096,10.461609 6.883575,16.72261 9.000183,25.000443c1.75174,6.8508 4.052765,13.987457 5.000061,18.00032c2.118256,8.973083 4.094177,17.225052 7.000153,27.000488c3.069031,10.32399 6.925659,20.788925 9.000153,32.000565c1.828522,9.882324 4.562469,16.848541 7.000122,27.000488c2.610443,10.871521 2.761414,16.044952 4.000061,22.000366c0.8396,4.036804 2.998138,8.259521 5.000092,12.000214c2.406067,4.495758 3.49353,7.878723 4.000061,11.000214c0.48053,2.961304 0,6.000092 0,7.000122c0,1 -1.210052,-1.8508 -4.000061,-6.000122c-3.253662,-4.838898 -6.1828,-10.911407 -10.000183,-19.000336c-4.20343,-8.906982 -11.355286,-18.829254 -17.000305,-31.000549c-6.408752,-13.817963 -8.827301,-21.089142 -13.000214,-29.000519c-4.803375,-9.106659 -7.568817,-13.78299 -10.000183,-21.000366c-2.632629,-7.814835 -3.891693,-14.250824 -6.000092,-21.000366c-2.000214,-6.403183 -2.761444,-13.044907 -4.000092,-19.000336c-0.8396,-4.036789 -1.498291,-11.938171 -2.000031,-18.00032c-0.659851,-7.972885 0,-14.000244 0,-19.000336c0,-6.000107 0,-12.000214 0,-16.000275c0,-2.000046 0,-5.000092 0,-6.000107c0,-2.000046 -0.707123,-3.292953 0,-4.000076c0.707123,-0.707123 2.186035,-0.307449 4.000061,1.000015c2.294586,1.653839 2.000061,4.000076 2.000061,5.000092c0,3.000046 0.57959,6.085922 0,8.000137c-1.044861,3.450928 -4.150635,4.658569 -9.000183,7.000122c-7.260376,3.5056 -11.736786,6.577301 -20.000336,10.000183c-5.843231,2.420349 -14.78302,3.568741 -22.000397,6.000107c-3.90741,1.316315 -11.878754,4.493546 -15.000275,5.000092c-0.987091,0.160187 -3.230865,1.423615 -2.000031,3.000046c2.537445,3.249908 12.000214,2.000031 23.000397,2.000031c8.000153,0 19.06778,-1.099686 28.000519,0c8.18454,1.007568 11.000183,3.000061 13.000214,3.000061c2.000031,0 3.693512,0.458817 5.000092,1.000015c0.92392,0.382706 1.000031,1.000015 1.000031,2.000031c0,1.000031 0,2.000046 0,3.000061c0,1.000015 -0.824432,1.0979 -2.000031,3.000046c-1.051483,1.70134 -0.186005,2.692581 -2.000061,4.000076c-1.147278,0.82692 -4.097961,2.824478 -6.000092,4.000076c-1.701324,1.051483 -3.823822,2.486298 -6.000122,3.000046c-0.973236,0.229752 -2.186066,0.692551 -4.000061,2.000031c-1.147278,0.82692 -2.000031,1.000031 -3.000061,1.000031c-2.000031,0 -2.000031,1.000015 -4.000061,2.000031c-2.000031,1.000015 -3.000061,2.000031 -6.000092,2.000031l-4.000092,2.000046" id="svg_1" class="q12" stroke-width="1.5" stroke="#000" fill="none"/>
</svg>

上面的代码可忽略，主要是用SVG画出的一个文字，怎么让这个文字动起来，往下看

样式部分：

        <style type="text/css">
            .active{
                -webkit-animation: go 10s infinite;
            }
            @-webkit-keyframes go{
                form{
                    stroke-dashoffset: 10000; 
                }
                to{ 
                    stroke-dashoffset: 0; 
                }
            }
            
        </style>

JS部分

    <script type="text/javascript">
        var p = document.querySelector("#svg_1");
        var l = p.getTotalLength();
        
        $(‘#svg_1‘).css({
            strokeDashoffset: l,
            strokeDasharray: l,
            stroke:"red",
            strokeWidth:"10px"
        })
        
        $(document).on("click",function(){
            debugger
            p.className.baseVal = "active";
        })
    </script>

 

好啦，自己跑一跑吧

对了对了！！！ 附送一个svg 在线编辑工具 http://editor.method.ac/

另外再给一个网站，里面东西不错 http://www.yyyweb.com/