javascript - SVG:单击按钮后触发 animateTransform 上的单击事件

Question

我想让我的 svg 动画在单击 html 按钮时运行。我想我可以通过在 animateTransform 中设置 begin="click 来实现这一点，然后在 animateTransform (或 svg包含 animateTransform 的元素，我尝试了两者)使用 js。任何建议都会有很大帮助。

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>

Answer 1

如果您想启动动画，只需直接通过 javascript 和 beginElement 方法即可，无需所有点击事件的繁琐操作。请注意，我已将动画的开始时间从单击更改为无限期，以便更清楚地显示正在发生的情况。

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>