Запуск SVG анимации из JS

03 февраля 2021, 01:00

Есть анимация SVG которая запускается при нажатии на кнопку SVG с id="group1":

 begin="group1.click"// тут запуск этой анимация при нажатие на кнопку group1
  <g id="group1" transform="translate(-400 0)"> 
  <rect id="btn" x="398" y="448" width="48" height="18" rx="5" fill="#d3d3d3"  stroke="grey" />   
   <text id="txt1" x="402" y="460" font-size="10" font-weight="600" > Выстрел </text>
 </g>

Как сделать, чтобы эта анимация запускалась с помощью JS при нажатии на кнопку HTML, например:

btn115=document.createElement( 'BUTTON'); // создание кнопки
btn115.id='cmd888'; 
btn115.innerText = "Запуск анимации";
document.getElementById("container").appendChild(btn115); // нужно чтобы добавилось 
btn115.onclick=function(){
}

Answer 1

Вариант запуска анимации SVG при клике на кнопку SVG

<svg id="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg"  
    xmlns:xlink="http://www.w3.org/1999/xlink" 
	     width="400" height="400" viewBox="0 0 400 400" >   
<!-- Рычаг, который будет вращаться -->  
		  
<rect id="rect1" x="100" y="100" width="10" height="100" rx="5" fill="#d3d3d3" /> 
 <!-- Ось вращения --> 
 <circle cx="105" cy="105" r="2" fill="black" />   
  
  <!-- команда анимации вращения --> 
  <animateTransform 
   xlink:href="#rect1" 
  attributeName="transform" 
   type="rotate" 
   values="0 105 105;90 105 105" 
   dur="2s" 
   begin="group1.click" 
   fill="freeze" />  
  
    <g id="group1" transform="translate(0 0)">  
  <rect id="btn" x="190" y="240" width="70" height="25" rx="5" fill="#d3d3d3"  stroke="grey" />    
   <text id="txt1" x="198" y="256" font-size="14" font-weight="600" > Выстрел </text> 
 </g>  
</svg>

Вариант запуска анимации с помощью JS при клике на кнопку добавленную в HTML

<svg id="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg"  
    xmlns:xlink="http://www.w3.org/1999/xlink" 
	     width="400" height="400" viewBox="0 0 400 400" >   
<!-- Рычаг, который будет вращаться -->  
		  
<rect id="rect1" x="100" y="100" width="10" height="100" rx="5" fill="#d3d3d3" /> 
 <!-- Ось вращения --> 
 <circle cx="105" cy="105" r="2" fill="black" />   
  
  <!-- команда анимации вращения --> 
  <animateTransform id="an_revolver" 
   xlink:href="#rect1" 
  attributeName="transform" 
   type="rotate" 
   values="0 105 105;90 105 105" 
   dur="2s" 
   begin="btn10.click" 
   fill="freeze" />  
  
</svg>	  
<!-- Добавляем кнопку --> 
<div class="wrap"> 
 <button type="button" id="btn10"> Запуск анимации </button> 
</div> 
<script> 
<!-- Запоминаем в переменную ID кнопки --> 
var btn = document.getElementById('btn10');  
 
<!-- Запоминаем в переменную ID анимации --> 
var an_revolver = document.getElementById('an_revolver'); 
 
<!-- Функция запуска анимации при клике на кнопку --> 
btn.onclick = function () { 
an_revolver.beginElement(); 
} 
</script>