Trigger SVG-Animation durch Klick auf die Schaltfläche

Question

Ich versuche, eine SVG-Animation auszulösen, wenn auf die Schaltfläche geklickt wird. Dies ist mein dritter Abend versucht, und immer noch keinen Erfolg.

Ich weiß, dass die Animation funktioniert, wenn ich darauf klicke, wenn ich beginne = "klicke" Aber ich kann es nicht mit einer Schaltfläche arbeiten.

<?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> 

Unten ist der Javascript-Teil.

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

You can find it here on Codepen.io

Answer 1

scheine ich die Animation bekommen zu haben, indem zuerst JQuery zu Ihrem HTML-Code auf die codepen zu arbeiten:

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

und ein Element von ID zu erhalten, verwenden Sie # statt von $:

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