我是svg动画的新手，对代码语言一无所知。此外，我确定我的问题尽可能地愚蠢，但无论如何我都去了：我在一个酒吧上有一个圆圈，当我点击时，我希望那个圆圈在条形图上从左向右移动然后再次点击将其移回原位。这是我能做的吗？我成功地使用SMIL（动画）做了第一个动画，但我似乎无法获得第二个动画。我提供我的Html代码（我使用Inkscape，顺便说一句）。 谢谢你的回答！
<?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>
<animate
id="switch_anim"
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"
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"
dur="0.3s"
begin="click"
end="reverse_switch_anim.begin"
attributeName="d"
fill="freeze"
xlink:href="#switch"/>
答案 0 :(得分：0)
如果你作弊，有两个（或更多）物体并在它们之间切换，你可以这样做。如果他们看起来一样，没有人会知道他们实际上并不是同一个对象。
<?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>
<animate
id="switch_anim"
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"
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"
dur="0.3s"
begin="click"
attributeName="d"
fill="remove"
xlink:href="#switch"/>
<set
begin="switch_anim.end"
attributeName="display"
to="none"
fill="freeze"
xlink:href="#switch"/>
<set
begin="switch_anim.end"
attributeName="display"
to="block"
fill="freeze"
xlink:href="#switch2"/>
<animate
id="switch2_anim"
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"
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"
dur="0.3s"
begin="click"
attributeName="d"
fill="remove"
xlink:href="#switch2"/>
<set
begin="switch2_anim.end"
attributeName="display"
to="none"
fill="freeze"
xlink:href="#switch2"/>
<set
begin="switch2_anim.end"
attributeName="display"
to="block"
fill="freeze"
xlink:href="#switch"/>
</svg>