SVG：单击按钮后触发animateTransform上的单击事件 [英] SVG: Trigger a click event on animateTransform after clicking a button

问题描述

我想在点击html按钮时运行我的svg动画。我想我可以通过在 animateTransform 中设置 begin =click >来完成这项工作，然后在 animateTransform （或者包含 animateTransform 的svg元素，我都试过）使用js。
任何建议都会这是一个很好的帮助。

var needle = $（'＃needle'） ，tape = $（'＃tape'），btn = $（'＃muhBtn'）; btn.on（'click'，function（）{needle.click（）; tape.click（）;}）; code>

#tape {fill：＃ED1C24;}＃needle {fill： ＃8DC63F;}

< script src =https： //ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js\"></script><?xml version =1.0encoding =utf-8 &;< svg version =1.1id =Layer_1xmlns：x =& ns_extend;xmlns：i =& ns_ai;xmlns：graph =& ns_graphs;xmlns = http://www.w3.org/2000/svgxmlns：xlink =http://www.w3.org/1999/xlinkx =0pxy =0pxwidth =200pxheight = 200pxviewBox =0 0 200 200style =enable-background：new 0 0 200 200;xml：space =preserve> < circle cx =100cy =100r =100class =background/> < path class =st0id =taped =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 =animateTapeattributeName =transformattributeType =XMLtype =rotatefrom =0 100 100to =180 100 100dur =5sbegin =clickrepeatCount = 1\" /> < /路径> <路径d =M200,100c0,55.2-44.8,100-100,100V0C155.2,0,200,44.8,200,100zclass =mask/> < polygon class =st1id =needlepoints =96,100 104,100 104,192 100,200 96,192> < animateTransform id =animateNeedleattributeName =transformattributeType =XMLtype =rotatefrom =0 100 100to =180 100 100dur =5sbegin =clickrepeatCount = 1\" /> < /多边形> < / svg>< button class =btn btn-warningid =muhBtn> Begin！< / button>

如果你想开始动画，只需通过JavaScript和beginElement方法直接执行，那么不需要所有这些点击事件rigmarole。请注意，我已将点击动画的开头从点击更改为无限期，以使其更清晰。

data-hide =false>

var needle = $（' animateNeedle'），tape = $（'＃animateTape'）; btn.on（'click'，function（）{needle [0] .beginElement（）; tape [0] .beginElement（）;}）;

#tape {fill：＃ED1C24;}＃needle {fill：＃8DC63F;}

 < script src =https：//ajax.googleapis .com / ajax / libs / jquery / 2.1.1 / jquery.min.js>< / script><？xml version =1.0encoding =utf-8？>< svg version = 1.1id =Layer_1xmlns：x =& ns_extend;的xmlns：I = &安培; ns_ai;的xmlns：图表= &安培; ns_graphs; xmlns =http://www.w3.org/2000/svgxmlns：xlink =http://www.w3.org/1999/xlinkx =0pxy =0pxwidth =200px height =200pxviewBox =0 0 200 200style =enable-background：new 0 0 200 200; xml：space =preserve>< circle cx =100cy =100r =100class =background/>< path class =st0id = 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 =animateTapeattributeName =transformattributeType =XMLtype =rotatefrom =0 100 100to =180 100 100dur =5sbegin =indefiniterepeatCount = 1\" /> < / path><路径d =M200,100c0,55.2-44.8,100-100,100V0C155.2,0,200,44.8,200,100zclass =mask/> < polygon class =st1id =needlepoints =96,100 104,100 104,192 100,200 96,192> < animateTransform id =animateNeedleattributeName =transformattributeType =XMLtype =rotatefrom =0 100 100to =180 100 100dur =5sbegin =indefiniterepeatCount = 1\" /> < / polygon>< / svg>< button class =btn btn-warningid =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.com/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.org/2000/svg" xmlns:xlink="http://www.w3.org/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>

解决方案

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.com/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.org/2000/svg" xmlns:xlink="http://www.w3.org/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>

这篇关于SVG：单击按钮后触发animateTransform上的单击事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！