javascript - SVG路径的绘制不是从0开始

Question

我正在使用 CSS 动画绘制一些 SVG 路径。同时绘制所有路径时一切正常。为动画添加延迟时，路径的某些部分在开始动画之前是可见的。然后它们突然消失了，动画就像我想要的那样继续。

这是它发生的一个代码笔：检查这里

    // SVG code
    var svgs = document.getElementsByTagName('svg');
    
    function selfdraw(name){
        for(var i=0; i<name.length; i++){
            name[i].classList.add('draw');
        }
    }

  /* SVG Styles */
    
    svg *{
        fill:none;
        stroke:none;
    	stroke-dasharray: 0% 100%;
    }
    
    .draw .st0 {
        stroke: #3DBAC4;
        stroke-width:5;
      	stroke-linecap:square;
      	stroke-miterlimit:10;
    	
    	-webkit-animation: self-draw 3s ease-in-out;
        -webkit-animation-fill-mode: forwards;
    }
    
    .draw .st1 {
    	stroke: #3DBAC4;
        stroke-width:5;
    	stroke-miterlimit:10;
    	
    	-webkit-animation: self-draw 3s ease-in-out;
        -webkit-animation-fill-mode: forwards;
    	animation-delay: 2s;
    }
    .draw .st2 {
        stroke: #3DBAC4;
        stroke-width:5;
      	stroke-linecap:square;
      	stroke-miterlimit:10;
    	
    	-webkit-animation: self-draw 3s ease-in-out;
        -webkit-animation-fill-mode: forwards;
    	animation-delay: 3s;
    }
    
    .draw .st3 {
        stroke: #8BD6DC;
      	stroke-width:3;
      	stroke-miterlimit:10;
    	
    	-webkit-animation: self-draw 3s ease-in-out;
        -webkit-animation-fill-mode: forwards;
    	animation-delay: 4s;
    }
    
    @-webkit-keyframes self-draw{
        0%   { stroke-dasharray: 0% 100% }
        100% { stroke-dasharray: 100% 0% }
    }

    <div style ="max-width:200px;">
    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
    	 viewBox="0 0 180 554" style="enable-background:new 0 0 180 554;" xml:space="preserve">
    <path class="st0" d="M50.38,130.89l0.3-109.65l84.9,0.68l-0.3,109.65L50.38,130.89z"/>
    <g>
    	<g>
    		<line class="st1" x1="69.19" y1="103.99" x2="116.08" y2="104.24"/>
    	</g>
    	<g>
    		<line class="st1" x1="69.28" y1="87.07" x2="116.17" y2="87.32"/>
    	</g>
    	<g>
    		<line class="st1" x1="69.37" y1="70.15" x2="116.26" y2="70.4"/>
    	</g>
    	<g>
    		<line class="st1" x1="69.46" y1="53.22" x2="116.35" y2="53.48"/>
    	</g>
    </g>
    <g>
    	<line class="st2" x1="82.77" y1="300.98" x2="79.54" y2="265.43"/>
    </g>
    <g>
    	<g>
    		<path class="st2" d="M104.68,507.15H85.32c-5.96,0-10.8-4.84-10.8-10.8v-20.83c-10.83-6.95-17.52-19.11-17.52-32
    			c0-20.95,17.05-38,38-38s38,17.05,38,38c0,12.89-6.68,25.05-17.52,32v20.83C115.48,502.31,110.64,507.15,104.68,507.15z"/>
    	</g>
    </g>
    <g>
    	<g>
    		<line class="st1" x1="73.82" y1="446.52" x2="116.13" y2="446.45"/>
    	</g>
    </g>
    <g>
    	<g>
    		<path class="st2" d="M104.62,518.15H85.38v-33.28h19.24V518.15z"/>
    	</g>
    </g>
    <polyline class="st1" points="80.36,432.84 92.5,484 97.5,484 110.06,432.39 "/>
    <path class="st3" d="M94.86,143.85c-1.5,2.41-1.49,5.41,0.02,7.82c0.42,0.67,0.89,1.29,1.33,1.89c0.82,1.1,1.59,2.13,1.72,3.01
    	c0.16,1.13-0.85,2.7-1.84,4.21c-1.48,2.27-3.15,4.85-1.97,7.67c0.52,1.24,1.3,2.27,2.06,3.27c0.64,0.84,1.24,1.63,1.56,2.41
    	c0.36,0.88-0.06,2.23-1.22,3.8c-1.53,2.07-3.26,4.42-2.86,7.11c0.28,1.88,1.39,3.37,2.47,4.81c0.42,0.57,0.82,1.1,1.16,1.65
    	c0.69,1.11,0.69,2.44-0.01,3.56c-0.34,0.54-0.73,1.06-1.15,1.62c-1.08,1.45-2.21,2.95-2.48,4.85"/>
    <path class="st3" d="M94.86,337.85c-1.5,2.41-1.49,5.41,0.02,7.82c0.42,0.67,0.89,1.29,1.33,1.89c0.82,1.1,1.59,2.13,1.72,3.01
    	c0.16,1.13-0.85,2.7-1.84,4.21c-1.48,2.27-3.15,4.85-1.97,7.67c0.52,1.24,1.3,2.27,2.06,3.27c0.64,0.84,1.24,1.63,1.56,2.41
    	c0.36,0.88-0.06,2.23-1.22,3.8c-1.53,2.07-3.26,4.42-2.86,7.11c0.28,1.88,1.39,3.37,2.47,4.81c0.42,0.57,0.82,1.1,1.16,1.65
    	c0.69,1.11,0.69,2.44-0.01,3.56c-0.34,0.54-0.73,1.06-1.15,1.62c-1.08,1.45-2.21,2.95-2.48,4.85"/>
    <path class="st3" d="M142.84,376.94c-0.27,1.32-0.2,2.61-0.14,3.86c0.05,1.05,0.1,2.05-0.07,2.87c-0.2,0.93-1.31,1.81-3.15,2.45
    	c-2.43,0.85-5.19,1.82-6.37,4.26c-0.82,1.71-0.75,3.57-0.67,5.36c0.03,0.71,0.06,1.38,0.03,2.02c-0.06,1.31-0.81,2.4-2.02,2.93
    	c-0.58,0.25-1.2,0.47-1.86,0.69c-1.71,0.59-3.49,1.2-4.78,2.61"/>
    <path class="st3" d="M170.49,420.46c-0.86,1.04-1.41,2.2-1.95,3.33c-0.45,0.95-0.88,1.85-1.42,2.5c-0.61,0.73-2.01,0.98-3.94,0.67
    	c-2.55-0.4-5.43-0.85-7.63,0.74c-1.53,1.12-2.34,2.79-3.12,4.41c-0.31,0.64-0.6,1.24-0.92,1.79c-0.67,1.12-1.85,1.73-3.16,1.63
    	c-0.63-0.05-1.28-0.16-1.97-0.27c-1.79-0.29-3.64-0.59-5.45,0.04"/>
    <path class="st3" d="M169.88,474.23c-1.33,0.23-2.51,0.76-3.64,1.27c-0.96,0.43-1.87,0.84-2.7,0.98c-0.94,0.16-2.16-0.56-3.43-2.04
    	c-1.68-1.95-3.58-4.17-6.29-4.38c-1.89-0.14-3.59,0.61-5.24,1.33c-0.65,0.29-1.26,0.56-1.87,0.76c-1.24,0.42-2.53,0.12-3.46-0.81
    	c-0.45-0.45-0.87-0.95-1.33-1.48c-1.17-1.38-2.39-2.81-4.17-3.5"/>
    <path class="st3" d="M21.69,479.37c0.92-0.98,1.55-2.11,2.16-3.2c0.51-0.92,0.99-1.79,1.57-2.4c0.66-0.69,2.07-0.85,3.97-0.42
    	c2.51,0.56,5.37,1.2,7.66-0.25c1.6-1.02,2.52-2.64,3.4-4.2c0.35-0.62,0.68-1.2,1.04-1.73c0.74-1.08,1.95-1.61,3.26-1.42
    	c0.63,0.09,1.27,0.24,1.95,0.39c1.77,0.41,3.59,0.82,5.44,0.31"/>
    <path class="st3" d="M15.18,429.81c1.28-0.43,2.36-1.13,3.41-1.8c0.89-0.57,1.72-1.11,2.52-1.37c0.9-0.29,2.22,0.23,3.7,1.51
    	c1.95,1.68,4.16,3.59,6.87,3.4c1.89-0.14,3.46-1.13,4.98-2.1c0.6-0.38,1.16-0.74,1.73-1.03c1.16-0.6,2.48-0.5,3.54,0.29
    	c0.51,0.38,1,0.81,1.53,1.27c1.36,1.19,2.78,2.43,4.65,2.84"/>
    <path class="st3" d="M41.1,379.47c1.25,0.5,2.53,0.68,3.77,0.84c1.04,0.14,2.03,0.27,2.81,0.59c0.88,0.36,1.54,1.62,1.84,3.54
    	c0.39,2.55,0.84,5.43,3.02,7.04c1.53,1.12,3.37,1.38,5.15,1.63c0.7,0.1,1.36,0.19,1.99,0.34c1.27,0.29,2.21,1.23,2.51,2.52
    	c0.14,0.62,0.24,1.27,0.34,1.96c0.27,1.79,0.54,3.65,1.7,5.18"/>
    <line class="st2" x1="63" y1="243.52" x2="125" y2="243.52"/>
    <polygon class="st2" points="131.5,214.5 56.5,214.5 52.5,243.5 61.5,243.5 70.27,325.92 117.74,325.92 126.41,243.5 135.5,243.5 
    	"/>
    </svg>
    </div>
    
    <button onclick="selfdraw(svgs)">CLICK ME</button>

我希望所有的路径从一开始都是不可见的，然后很好地把它们自己画出来。我看不出我做错了什么。

标签： javascriptcsssvg