Как применить одну SMIL анимацию к нескольким SVG элементам

Question

подскажите, пожалуйста, как применить одну SMIL анимацию к нескольким SVG элементам?

Answer 1

Интересный вопрос (++)

Так как в SVG привязка анимации к объекту осуществляется только по ID объекта и сама анимация может иметь только один уникальный Идентификатор, то возможен всего один способ:

применить одну SMIL анимацию к нескольким SVG элементам

Обернуть несколько элементов SVG в групповой тег <g> и применить одну анимацию к группе.

Анимация начнётся после клика по холсту SVG

<svg id="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
	  
     width="800" height="800" viewBox="0 0 800 800" >  

   <g id="group">
     <rect x="10" y="10" width="50" height="50" rx="5" fill="purple" /> 
      <rect x="25" y="70" width="50" height="50" rx="5" fill="gold" />
	     <rect x="50" y="130" width="50" height="50" rx="5" fill="yellowgreen" />
   </g>	 
   <animateTransform xlink:href="#group" attributeName="transform" type="translate" begin="svg1.click" dur="10s" values="0 0;100 100;300 400;600 200;300 400;100 100;0 0" repeatCount="indefinite"/>   
		 
</svg>

Возможно добавить несколько SMIL анимаций к одному объекту или к одной группе

Например анимацию перемещения translate и одновременное увеличение scale

<svg id="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
	  
     width="800" height="800" viewBox="0 0 800 800" >  

   <g id="group">
     <rect x="10" y="10" width="50" height="50" rx="5" fill="purple" /> 
      <circle cx="50" cy="100" r="25" fill="gold" />
	     <rect x="50" y="130" width="50" height="50" rx="5" fill="yellowgreen" />
   </g>	 
   <animateTransform xlink:href="#group" attributeName="transform" type="translate" 
     begin="svg1.click"  dur="10s" values="0 0;100 100;300 400;600 200;300 400;100 100;0 0" repeatCount="indefinite"/>  
      <animateTransform xlink:href="#group" attributeName="transform" type="scale"
    	  begin="svg1.click" dur="10s" values="1;2;2.5;2.5;1;1" repeatCount="indefinite" additive="sum"/>   
        	 
</svg>

БЛОГ НА HUSL

Как применить одну SMIL анимацию к нескольким SVG элементам

Ответы (1 шт):