5

Есть анимация 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(){

}

1 ответ 1

4

Вариант запуска анимации 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>  

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.