I would like to have my svg animation run when clicking an html button. I thought I could make that work by setting begin="click in my animateTransform and then trigger a click event on the animateTransform (or the svg element containing the animateTransform, I tried both) using js. Any advice would be a great help.

var needle = $('#needle'),
  tape = $('#tape'),
  btn = $('#muhBtn');

btn.on('click', function() {
  needle.click();
  tape.click();
});

#tape {
  fill: #ED1C24;
}

#needle {
  fill: #8DC63F;
}

<script src=".1.1/jquery.min.js"></script>

<?xml version="1.0" encoding="utf-8"?>

<svg version="1.1" id="Layer_1" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;" xmlns="" xmlns:xlink="" x="0px" y="0px" width="200px" height="200px" viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;"
  xml:space="preserve">
    <circle cx="100" cy="100" r="100" class="background"/>
    <path class="st0" id="tape" d="M182.7,100c0,45.7-37,82.7-82.7,82.7V17.3C145.7,17.3,182.7,54.3,182.7,100z">
      <animateTransform id="animateTape"
                          attributeName="transform"
                          attributeType="XML"
                          type="rotate"
                          from="0 100 100"
                          to="180 100 100"
                          dur="5s"
                          begin="click"
                          repeatCount="1"/>  
      </path>
    <path d="M200,100c0,55.2-44.8,100-100,100V0C155.2,0,200,44.8,200,100z" class="mask"/>
      <polygon class="st1" id="needle" points="96,100 104,100 104,192 100,200 96,192">
      <animateTransform id="animateNeedle"
                          attributeName="transform"
                          attributeType="XML"
                          type="rotate"
                          from="0 100 100"
                          to="180 100 100"
                          dur="5s"
                          begin="click"
                          repeatCount="1"/>
      </polygon>
    </svg>
<button class="btn btn-warning" id="muhBtn">Begin!</button>

I would like to have my svg animation run when clicking an html button. I thought I could make that work by setting begin="click in my animateTransform and then trigger a click event on the animateTransform (or the svg element containing the animateTransform, I tried both) using js. Any advice would be a great help.

var needle = $('#needle'),
  tape = $('#tape'),
  btn = $('#muhBtn');

btn.on('click', function() {
  needle.click();
  tape.click();
});

#tape {
  fill: #ED1C24;
}

#needle {
  fill: #8DC63F;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<?xml version="1.0" encoding="utf-8"?>

<svg version="1.1" id="Layer_1" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;" xmlns="http://www.w3/2000/svg" xmlns:xlink="http://www.w3/1999/xlink" x="0px" y="0px" width="200px" height="200px" viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;"
  xml:space="preserve">
    <circle cx="100" cy="100" r="100" class="background"/>
    <path class="st0" id="tape" d="M182.7,100c0,45.7-37,82.7-82.7,82.7V17.3C145.7,17.3,182.7,54.3,182.7,100z">
      <animateTransform id="animateTape"
                          attributeName="transform"
                          attributeType="XML"
                          type="rotate"
                          from="0 100 100"
                          to="180 100 100"
                          dur="5s"
                          begin="click"
                          repeatCount="1"/>  
      </path>
    <path d="M200,100c0,55.2-44.8,100-100,100V0C155.2,0,200,44.8,200,100z" class="mask"/>
      <polygon class="st1" id="needle" points="96,100 104,100 104,192 100,200 96,192">
      <animateTransform id="animateNeedle"
                          attributeName="transform"
                          attributeType="XML"
                          type="rotate"
                          from="0 100 100"
                          to="180 100 100"
                          dur="5s"
                          begin="click"
                          repeatCount="1"/>
      </polygon>
    </svg>
<button class="btn btn-warning" id="muhBtn">Begin!</button>

• javascript
• jquery
• html
• svg
• smil

Share Improve this question Follow edited Feb 25, 2017 at 13:46 Yuri 78433 gold badges99 silver badges1818 bronze badges asked Aug 6, 2015 at 13:17 DylanDylan 2811 silver badge33 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

If you want to start the animations just do it directly via javascript and the beginElement method, no need for all that click event rigmarole. Note that I've changed the begin on the animation from click to indefinite to make it clearer what's happening.

var needle = $('#animateNeedle'),
	tape = $('#animateTape');
	btn = $('#muhBtn');

btn.on('click', function(){
	needle[0].beginElement();
	tape[0].beginElement();
});

#tape{
  fill:#ED1C24;
}

#needle{
  fill:#8DC63F;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<?xml version="1.0" encoding="utf-8"?>

<svg version="1.1" id="Layer_1" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;"
	 xmlns="http://www.w3/2000/svg" xmlns:xlink="http://www.w3/1999/xlink" x="0px" y="0px" width="200px" height="200px"
	 viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve">
<circle cx="100" cy="100" r="100" class="background"/>
<path class="st0" id="tape" d="M182.7,100c0,45.7-37,82.7-82.7,82.7V17.3C145.7,17.3,182.7,54.3,182.7,100z">
  <animateTransform id="animateTape"
                      attributeName="transform"
                      attributeType="XML"
                      type="rotate"
                      from="0 100 100"
                      to="180 100 100"
                      dur="5s"
                      begin="indefinite"
                      repeatCount="1"/>  
  </path>
<path d="M200,100c0,55.2-44.8,100-100,100V0C155.2,0,200,44.8,200,100z" class="mask"/>
  <polygon class="st1" id="needle" points="96,100 104,100 104,192 100,200 96,192">
  <animateTransform id="animateNeedle"
                      attributeName="transform"
                      attributeType="XML"
                      type="rotate"
                      from="0 100 100"
                      to="180 100 100"
                      dur="5s"
                      begin="indefinite"
                      repeatCount="1"/>
  </polygon>
</svg>
<button class="btn btn-warning" id="muhBtn">Begin!</button>