[original] achieve the effect of SVG painting action

Background: when I saw the svg pictures of others on the Internet, they were line drawings drawn. I felt very good. After studying, write the following demo, which can be used to run directly

The animation effect seems to be only effective in the path tag of svg. The key implementation is to use the following two attributes and control the animation in css3.

svg basic point
Stroke dasharray: the pattern normal form of dotted line used for edge tracing. The larger the value is, the wider the dotted line is.
Stroke dashoffset: property specifies the distance from the dash mode to the beginning of the path.

1. Control the width of dashed line. If it is initialized to blank, then make stroke dashffset and stroke dasharray equal to the total length of path to be drawn. How to calculate the total length of path?

	var path = document.querySelector('.path');
   	var length = path.getTotalLength();   //That's the number.

2 animation attribute, define a stroke dashhoffset of 0, and define the life cycle time of the animation. See the demo code below for details.

Here is the demo content
Note: it must be implemented in the path of SVG.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
  
   
    <svg xmlns="http://www.w3.org/2000/svg" width="580" height="400">
        <g>
         <title>background</title>
         <rect fill="#fff" id="canvas_background" height="402" width="582" y="-1" x="-1"/>
         <g display="none" overflow="visible" y="0" x="0" height="100%" width="100%" id="canvasGrid">
          <rect fill="url(#gridpattern)" stroke-width="5" y="0" x="0" height="100%" width="100%"/>
         </g>
        </g>
        <g>
         <title>Layer 1</title>
         <path class="path1" d="m175.5,240c0,0 2.439667,-3.436249 8,-10c6.398788,-7.553513 20.439194,-14.8246 30,-28c7.096558,-9.77951 9.279068,-24.191116 12,-33c1.58931,-5.145294 1.337494,-7.310013 3,-10c0.7435,-1.203003 2.279327,-3.57196 4,-5c5.602112,-4.649338 15,-3 24,-3c14,0 28.062592,-0.220062 46,5c23.084015,6.717804 45.199768,14.611099 63,24c18.212982,9.606613 23.211639,10.854065 27,20c1.148041,2.771637 1.877441,9.468704 -1,17c-5.643127,14.770081 -20.075073,24.883392 -31,32c-9.063324,5.903931 -20.465912,10.179443 -28,15c-5.393585,3.450989 -6,5 -6,6c0,2 1.055695,4.392212 -2,11c-3.026733,6.545135 -6.729614,12.228851 -11,17c-1.886353,2.107544 -4.748505,5.465851 -10,8c-7.694916,3.713226 -13.866943,6.544189 -21,8c-7.899414,1.612213 -22,1 -40,1c-15,0 -22.174179,0.749207 -28,-1c-9.432846,-2.832214 -13.829712,-5.282654 -17,-7c-6.696396,-3.627441 -15.260895,-3.975128 -25,-7c-7.273041,-2.258942 -12.347183,-3.288666 -17,-6c-5.532333,-3.223846 -8.328217,-11.842529 -13,-22c-8.614334,-18.729477 -11.859543,-28.016724 -13,-37c-0.890549,-7.014771 -2,-15 -2,-24c0,-8 -1.104729,-15.506592 3,-23c2.402115,-4.385193 5.289383,-10.411499 9,-16c5.099762,-7.680649 9,-12 13,-16c3,-3 6,-4 8,-5c2,-1 4,-2 5,-2c1,0 1.763138,2.34346 4,8c2.651794,6.705811 5.768585,12.6129 8,18c1.57785,3.80925 3,8 3,11c0,6 -1.148758,8.133759 0,13c0.513748,2.176254 1,4 1,5c0,2 0,4 0,6c0,1 0,2 0,4c0,2 -1,3 -1,4c0,1 0,2 0,3c0,1 0,2 0,3c0,1 0,2 0,4c0,1 -1,3 -1,4l0,1l0,1l0,1" id="svg_15" stroke-width="1.5" stroke="#000" fill="none"/>
        </g>
    </svg>

    <svg xmlns="http://www.w3.org/2000/svg" width="580" height="400">
        <g>
         <title>background</title>
         <rect fill="#fff" id="canvas_background" height="402" width="582" y="-1" x="-1"/>
         <g display="none" overflow="visible" y="0" x="0" height="100%" width="100%" id="canvasGrid">
          <rect fill="url(#gridpattern)" stroke-width="5" y="0" x="0" height="100%" width="100%"/>
         </g>
        </g>
        <g>
         <title>Layer 2</title>
         <path class="path2" d="m316.5,242c0,0 -0.151581,-3.045105 2,-10c2.803772,-9.063049 4.33197,-15.229355 6,-19c1.458649,-3.297333 3,-6 4,-7c1,-1 0.705475,-2.346191 3,-4c1.813995,-1.307449 3.147278,-2.173096 2,-3c-3.627991,-2.614899 -8.789154,-2.896805 -24,-6c-13.85672,-2.826935 -22,-2 -28,-2c-4,0 -6.418854,-0.581146 -8,1c-1.581146,1.581146 -3.563507,5.702499 -6,11c-2.642761,5.745941 -4.798615,13.044525 -6,18c-1.715271,7.07515 -4.486267,12.823746 -5,15c-0.919006,3.89299 0,8 0,10c0,1 0,2 0,5c0,3 -3,7 -6,10c-4,4 -7.053497,6.540497 -9,7c-2.176254,0.513733 -3,1 -7,1c-4,0 -8,0 -12,0c-3,0 -7.802429,-0.432892 -14,-3c-5.843124,-2.420288 -6.693436,-3.541199 -8,-3c-0.923874,0.38269 -0.707108,2.292908 0,3c0.707108,0.707092 2.794876,-0.220215 6,-3c3.777267,-3.276001 8.531647,-7.517029 14,-12c2.78833,-2.285873 5.877655,-5.06601 7,-7c1.809723,-3.118484 2.520157,-4.323669 4,-6c2.386169,-2.703003 5.190277,-3.881516 7,-7c2.24469,-3.867996 5,-8 8,-12c3,-4 5,-7 7,-10c2,-3 4.173096,-6.852737 5,-8c1.307465,-1.813995 2,-4 3,-6c1,-2 2.346191,-2.70546 4,-5c1.307465,-1.813995 2.458801,-1.693436 3,-3c0.38269,-0.923874 1.934143,-2.144287 4,-3c2.92157,-1.210144 4,-2 5,-2c2,0 3.041321,0.152771 7,-1c3.036163,-0.88414 9,-1 16,-1c9,0 15.106995,0.080994 19,1c2.176239,0.513748 4.042908,0.71022 5,1c3.450836,1.04483 5.906342,3.103409 7,4c2.78833,2.285873 6.769501,4.390991 9,8c3.325012,5.37999 2.583893,8.028992 3,11c1.009766,7.209747 3,10 3,12c0,3 0,5 0,7c0,3 -1,5 -2,6c-3,3 -5,4 -8,5c-3,1 -8,2 -10,2c-1,0 -2.186005,0.692551 -4,2c-1.147278,0.826904 -2,2 -3,2c-1,0 -2,0 -3,0c-1,0 -3,0 -5,0l-1,0" id="svg_16" stroke-width="1.5" stroke="#000" fill="none"/>
        </g>
    </svg>

    <svg xmlns="http://www.w3.org/2000/svg" width="580" height="400">
        <!-- Created with Method Draw - http://github.com/duopixel/Method-Draw/ -->
        <g>
         <title>background</title>
         <rect fill="#fff" id="canvas_background" height="402" width="582" y="-1" x="-1"/>
         <g display="none" overflow="visible" y="0" x="0" height="100%" width="100%" id="canvasGrid">
          <rect fill="url(#gridpattern)" stroke-width="0" y="0" x="0" height="100%" width="100%"/>
         </g>
        </g>
        <g>
         <title>Layer 1</title>
         <text stroke="#000" class="path3" transform="matrix(2.1535985469818115,0,0,4.55555534362793,-228.9893115758896,-709.1110688447952) " xml:space="preserve" text-anchor="start" font-family="Helvetica, Arial, sans-serif" font-size="24" id="svg_1" y="201.900914" x="170.175315" stroke-width="0" fill="#bf4c4c">HIKVISION</text>
        </g>
    </svg>
    
</body>
<style>
    /* How to get the length of stroke   
    
    var path = document.querySelector('.path');
    var length = path.getTotalLength(); 
    
    */
.path1 {
  stroke-dasharray: 100;
  animation: dash 5s linear ;
}
@keyframes dash {
  to {
    stroke-dashoffset: 1000;
  }
}

.path2{
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: dash2 5s linear forwards;
}
@keyframes dash2 {
  to {
    stroke-dashoffset: 0;
  }
}
.path3{
    stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dash3 5s linear forwards;
}
@keyframes dash3 {
  to {
    stroke-dashoffset: 0;
  }
}
</style>
</html>

Tags: css3 Attribute IE github

Posted on Fri, 01 Nov 2019 17:27:04 -0700 by breath18