如何依次对图案项目进行动画处理？

Question

  <svg viewbox="0 0 100 100">
    	<defs>
    		<pattern
    				id="dotted-pattern"
    				viewbox="0,0,100,100"
    				height="3.125%"
    				width="3.125%">
    			<circle cx="50" cy="50" fill="#10446D" r="12">
    				<animate
    					attributeName="opacity"
    					values="0; 1"
    					keyTimes="0; 1"
    					dur="1s"
    					begin="0s"
    					repeatCount="1"
    					fill="freeze" />
    			</circle>
    		</pattern>
    		<mask id="circle-mask" maskContentUnits="userSpaceOnUse" maskUnits="userSpaceOnUse">
    			<circle cx="50" cy="50" r="38.48" width="100" height="100" fill="white"></circle>
    		</mask>
    	</defs>
    
    	<rect
    			width="74"
    			height="74"
    			y="13"
    			x="13"
    			mask="url(#circle-mask)"
    			fill="url(#dotted-pattern)"></rect>
    </svg>

通过这种方式，动画会同时针对所有图案项目运行。

如何依次运行？如果上一个动画完成了，就开始下一个动画吗？

Answer 1

我将对从白色到黑色的径向渐变进行动画处理，而不是对图案的圆进行动画处理，并使用该渐变填充蒙版圆，如下所示：

<svg viewbox="0 0 100 100">
    	<defs>
        <radialGradient id="rg" cx=".5" cy=".5" r="0.01">
   <stop offset="0%" stop-color="white"></stop>
   <stop offset="100%" stop-color="black"></stop>
          <animate
    					attributeName="r"
    					values="0.01; 1"
    					dur="3s"
    					begin="0s"
    					repeatCount="1"
    					fill="freeze" />
  </radialGradient>
    		<pattern
    				id="dotted-pattern"
    				viewbox="0,0,100,100"
    				height="3.125%"
    				width="3.125%">
    			<circle cx="50" cy="50" fill="#10446D" r="12"/>
    				
    		</pattern>
    		<mask id="circle-mask" maskContentUnits="userSpaceOnUse" maskUnits="userSpaceOnUse">
    			<circle id="kk" cx="50" cy="50" r="38.48" width="100" height="100" fill="url(#rg)">
            
          </circle>
    		</mask>
    	</defs>
    
    	<rect
    			width="74"
    			height="74"
    			y="13"
    			x="13"
    			mask="url(#circle-mask)"
    			fill="url(#dotted-pattern)"></rect>
        
        
    </svg>

第二个解决方案

您可以用白色填充蒙版圆并为半径设置动画，如下所示：

<svg viewbox="0 0 100 100">
    	<defs>

    		<pattern
    				id="dotted-pattern"
    				viewbox="0,0,100,100"
    				height="3.125%"
    				width="3.125%">
    			<circle cx="50" cy="50" fill="#10446D" r="12"/>
    				
    		</pattern>
    		<mask id="circle-mask" maskContentUnits="userSpaceOnUse" maskUnits="userSpaceOnUse">
    			<circle id="kk" cx="50" cy="50" r="38.48" width="100" height="100" fill="white">
            <animate
    					attributeName="r"
    					values="0.01; 38.48"
    					dur="3s"
    					begin="0s"
    					repeatCount="1"
    					fill="freeze" />
          </circle>
    		</mask>
    	</defs>
    
    	<rect
    			width="74"
    			height="74"
    			y="13"
    			x="13"
    			mask="url(#circle-mask)"
    			fill="url(#dotted-pattern)"></rect>
        
        
    </svg>