如何按顺序为模式项目设置动画？

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>