Как последовательно анимировать элементы шаблона?

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>