Kann ich mit click zwei Animationen erstellen? (SVG-Animation)

Question

Ich bin ein Neuling der SVG-Animation und weiß nichts über Code-Sprachen. Außerdem bin ich sicher, dass meine Frage so albern ist, wie es nur sein könnte, aber hier gehe ich trotzdem: Ich habe einen Kreis in einer Bar, und ich möchte, dass dieser Kreis sich von links nach rechts bewegt, wenn ich klicke und dann, um es mit einem weiteren Klick wieder in seine ursprüngliche Position zu bewegen. Ist das etwas, was ich tun kann? Es ist mir gelungen, die erste Animation mit SMIL (animate) zu machen, aber ich kann die zweite Animation nicht richtig erscheinen lassen. Ich stelle meinen HTML-Code zur Verfügung (ich benutze Inkscape, BTW). Danke für jede Antwort!

<?xml version="1.0" encoding="UTF-8" standalone="no"?> 
 
<!-- Created with Inkscape (http://www.inkscape.org/) --> 
 

 
<svg 
 
    xmlns:dc="http://purl.org/dc/elements/1.1/" 
 
    xmlns:cc="http://creativecommons.org/ns#" 
 
    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" 
 
    xmlns:svg="http://www.w3.org/2000/svg" 
 
    xmlns="http://www.w3.org/2000/svg" 
 
    xmlns:xlink="http://www.w3.org/1999/xlink" 
 
    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" 
 
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" 
 
    width="1052.3622" 
 
    height="744.09448" 
 
    id="svg2" 
 
    version="1.1" 
 
    inkscape:version="0.48.5 r10040" 
 
    sodipodi:docname="switch.svg"> 
 
    <sodipodi:namedview 
 
    id="base" 
 
    pagecolor="#ffffff" 
 
    bordercolor="#666666" 
 
    borderopacity="1.0" 
 
    inkscape:pageopacity="0.0" 
 
    inkscape:pageshadow="2" 
 
    inkscape:zoom="2.8" 
 
    inkscape:cx="220.45194" 
 
    inkscape:cy="418.19862" 
 
    inkscape:document-units="mm" 
 
    inkscape:current-layer="layer1" 
 
    showgrid="true" 
 
    units="mm" 
 
    inkscape:window-width="1366" 
 
    inkscape:window-height="705" 
 
    inkscape:window-x="-8" 
 
    inkscape:window-y="-8" 
 
    inkscape:window-maximized="1"> 
 
    <inkscape:grid 
 
     snapvisiblegridlinesonly="true" 
 
     enabled="true" 
 
     visible="true" 
 
     empspacing="5" 
 
     id="grid3050" 
 
     type="xygrid" /> 
 
    </sodipodi:namedview> 
 
    <script 
 
    type="text/javascript" 
 
    id="inkwebjs"> 
 
</script> 
 
    <defs 
 
    id="defs4" /> 
 
    <metadata 
 
    id="metadata7"> 
 
    <rdf:RDF> 
 
     <cc:Work 
 
     rdf:about=""> 
 
     <dc:format>image/svg+xml</dc:format> 
 
     <dc:type 
 
      rdf:resource="http://purl.org/dc/dcmitype/StillImage" /> 
 
     <dc:title /> 
 
     </cc:Work> 
 
    </rdf:RDF> 
 
    </metadata> 
 
    <g 
 
    transform="translate(0,-308.2677)" 
 
    id="layer1" 
 
    inkscape:groupmode="layer" 
 
    inkscape:label="Layer 1"> 
 
    <path 
 
     sodipodi:nodetypes="csccscc" 
 
     inkscape:connector-curvature="0" 
 
     id="bar" 
 
     d="m 265,309.09448 c 0,0 -15,0 -15,15 0,15 15,15 15,15 l 65,0 c 0,0 15,0 15,-15 0,-15 -15,-15 -15,-15 z" 
 
     style="fill:#999999;stroke:#000000;stroke-width:1.06299213;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none" 
 
     transform="translate(0,308.2677)" /> 
 
    <path 
 
     transform="matrix(0.8,0,0,0.8,46,373.08659)" 
 
     d="m 280,324.09448 c 0,13.80712 -11.19288,25 -25,25 -13.80712,0 -25,-11.19288 -25,-25 0,-13.80712 11.19288,-25 25,-25 13.80712,0 25,11.19288 25,25 z" 
 
     sodipodi:ry="25" 
 
     sodipodi:rx="25" 
 
     sodipodi:cy="324.09448" 
 
     sodipodi:cx="255" 
 
     id="switch" 
 
     style="fill:#999999;fill-opacity:1;stroke:#000000;stroke-width:1.32874016;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0" 
 
     sodipodi:type="arc" /> 
 
    </g> 
 
\t <animate 
 
\t \t id="switch_anim" 
 
\t \t to="m 380,324.09448 c 0,13.80712 -11.19288,25 -25,25 -13.80712,0 -25,-11.19288 -25,-25 0,-13.80712 11.19288,-25 25,-25 13.80712,0 25,11.19288 25,25 z" 
 
\t \t from="m 280,324.09448 c 0,13.80712 -11.19288,25 -25,25 -13.80712,0 -25,-11.19288 -25,-25 0,-13.80712 11.19288,-25 25,-25 13.80712,0 25,11.19288 25,25 z" 
 
\t \t dur="0.3s" 
 
\t \t begin="click" 
 
\t \t end="reverse_switch_anim.begin" 
 
\t \t attributeName="d" 
 
\t \t fill="freeze" \t 
 
\t \t xlink:href="#switch"/>

Answer 1

Sie können es tun, wenn Sie zu betrügen, haben zwei (oder mehr) Objekte und zwischen ihnen wechseln. Wenn sie gleich aussehen, wird niemand je wissen, dass sie nicht das gleiche Objekt sind.

<?xml version="1.0" encoding="UTF-8" standalone="no"?> 
 
<!-- Created with Inkscape (http://www.inkscape.org/) --> 
 

 
<svg 
 
    width="1052.3622" 
 
    height="744.09448"> 
 
    <g 
 
    transform="translate(0,-308.2677)" 
 
    id="layer1"> 
 
    <path 
 
     id="bar" 
 
     d="m 265,309.09448 c 0,0 -15,0 -15,15 0,15 15,15 15,15 l 65,0 c 0,0 15,0 15,-15 0,-15 -15,-15 -15,-15 z" 
 
     style="fill:#999999;stroke:#000000;stroke-width:1.06299213;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none" 
 
     transform="translate(0,308.2677)" /> 
 
    <path 
 
     transform="matrix(0.8,0,0,0.8,46,373.08659)" 
 
     d="m 280,324.09448 c 0,13.80712 -11.19288,25 -25,25 -13.80712,0 -25,-11.19288 -25,-25 0,-13.80712 11.19288,-25 25,-25 13.80712,0 25,11.19288 25,25 z" 
 
     id="switch" 
 
     style="fill:#999999;stroke:#000000;stroke-width:1.32874016;" /> 
 
    <path 
 
     transform="matrix(0.8,0,0,0.8,46,373.08659)" 
 
     d="m 380,324.09448 c 0,13.80712 -11.19288,25 -25,25 -13.80712,0 -25,-11.19288 -25,-25 0,-13.80712 11.19288,-25 25,-25 13.80712,0 25,11.19288 25,25 z" 
 
     id="switch2" 
 
     style="fill:#999999;stroke:#000000;stroke-width:1.32874016;display:none;" /> 
 
    </g> 
 
\t <animate 
 
\t \t id="switch_anim" 
 
\t \t to="m 380,324.09448 c 0,13.80712 -11.19288,25 -25,25 -13.80712,0 -25,-11.19288 -25,-25 0,-13.80712 11.19288,-25 25,-25 13.80712,0 25,11.19288 25,25 z" 
 
\t \t from="m 280,324.09448 c 0,13.80712 -11.19288,25 -25,25 -13.80712,0 -25,-11.19288 -25,-25 0,-13.80712 11.19288,-25 25,-25 13.80712,0 25,11.19288 25,25 z" 
 
\t \t dur="0.3s" 
 
\t \t begin="click" 
 
\t \t attributeName="d" 
 
\t \t fill="remove" \t 
 
\t \t xlink:href="#switch"/> 
 
\t <set 
 
\t \t begin="switch_anim.end" 
 
\t \t attributeName="display" 
 
     to="none" 
 
\t \t fill="freeze" \t 
 
\t \t xlink:href="#switch"/> 
 
\t <set 
 
\t \t begin="switch_anim.end" 
 
\t \t attributeName="display" 
 
     to="block" 
 
\t \t fill="freeze" \t 
 
\t \t xlink:href="#switch2"/> 
 
\t <animate 
 
\t \t id="switch2_anim" 
 
\t \t from="m 380,324.09448 c 0,13.80712 -11.19288,25 -25,25 -13.80712,0 -25,-11.19288 -25,-25 0,-13.80712 11.19288,-25 25,-25 13.80712,0 25,11.19288 25,25 z" 
 
\t \t to="m 280,324.09448 c 0,13.80712 -11.19288,25 -25,25 -13.80712,0 -25,-11.19288 -25,-25 0,-13.80712 11.19288,-25 25,-25 13.80712,0 25,11.19288 25,25 z" 
 
\t \t dur="0.3s" 
 
\t \t begin="click" 
 
\t \t attributeName="d" 
 
\t \t fill="remove" \t 
 
\t \t xlink:href="#switch2"/> 
 
\t <set 
 
\t \t begin="switch2_anim.end" 
 
\t \t attributeName="display" 
 
     to="none" 
 
\t \t fill="freeze" \t 
 
\t \t xlink:href="#switch2"/> 
 
\t <set 
 
\t \t begin="switch2_anim.end" 
 
\t \t attributeName="display" 
 
     to="block" 
 
\t \t fill="freeze" \t 
 
\t \t xlink:href="#switch"/> 
 
</svg>