SVG：单击按钮后在 animateTransform 上触发单击事件

Question

我希望在单击 html 按钮时运行我的 svg 动画。我想我可以通过在我的animateTransform 中设置begin="click 来完成这项工作，然后使用js 触发animateTransform（或包含animateTransform 的svg 元素，我都尝试过）上的点击事件。 任何建议都会有很大帮助。

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>