javascript - 通过按钮单击触发 SVG 动画

Question

我试图在单击下面的按钮时触发 SVG 动画。这是我第三个晚上尝试，但仍然没有成功。

我知道当我使用 begin="click"时单击动画时动画会起作用但我无法使用按钮让它工作。

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="Laag_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="-20 -20 400 400" width="350px" style="enable-background:new 0 0 306 307;" xml:space="preserve">
<style type="text/css">
    .st0{fill:#56595D;}
    .st1{fill:#427F31;}
    .st2{fill:#FFFFFF;}
    .st3{font-family: 'Roboto', sans-serif;}
    .st4{font-size:21px;}
</style>
<path id="RechtsBoven" class="st0" d="M243,153h63C306,68,238,0,153,0v63C203,63,243,103,243,153z"/>
<path id="LinksBoven" class="st0" d="M152,63V0C68,0,0,68,0,153h63C63,103,103,63,152,63z"/>
<path id="LinksOnder" class="st0" d="M63,154H0c0,85,68,153,153,153v-63C103,244,63,204,63,154z"/>
<path id="RechtsOnder" class="st0" d="M154,244v63c84,0,152-68,152-153h-63C243,204,203,244,154,244z"/>
<circle id="Midden" class="st1" cx="153" cy="153.5" r="89.2"/>
<text id="XMLID_33_" transform="matrix(1 0 0 1 92.7636 147.0369)"><tspan x="0" y="0" class="st2 st3 st4">BUSINESS IT</tspan><tspan x="-3.9" y="25.2" class="st2 st3 st4">CONSULTING</tspan></text>

<animateTransform 
           xlink:href="#RechtsBoven"
           attributeName="transform" 
           attributeType="XML"
           id="animatie1"
           type="translate"
           from="0 0"
           to="15 -15" 
           dur="0.3s"
           begin="indefinite"
           repeatCount="1"
           fill="freeze" />  


  <animateTransform 
           xlink:href="#RechtsOnder"
           attributeName="transform" 
           attributeType="XML"
           id="animatie2"
           type="translate"
           from="0 0"
           to="15 15" 
           dur="0.3s"
           begin="indefinite"
           repeatCount="1"
           fill="freeze" />  

</svg>

<br><br>
<button id="trigger1">Slide 1</button>

下面是 javascript 部分。

    $( "#trigger1" ).click(function() {
  document.getElementById("animatie1").beginElement();
});

You can find it here on Codepen.io

Answer 1

我似乎已经通过首先将 JQuery 添加到 HTML 中来在 codepen 上使用动画:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>

要通过 ID 获取元素，请使用 # 而不是 $:

$( "#trigger1" ).click(function() { ... }