0
Я новичок в анимации svg и ничего не знаю о языках кода. Кроме того, я уверен, что мой вопрос такой же глупый, как и может быть, но здесь я все равно: у меня есть круг на панели, и я бы хотел, чтобы этот круг перемещался слева направо на панели, когда я нажимаю и затем переместить его обратно в исходное положение с помощью другого щелчка. Это что-то я могу сделать? Мне удалось сделать первую анимацию с использованием SMIL (анимация), но я не могу получить вторую анимацию. Я предоставляю свой Html-код (я использую Inkscape, кстати). Спасибо за любой ответ!Могу ли я использовать щелчок, чтобы сделать две анимации? (svg animation)
<?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"/>
Огромное спасибо Роберту! Это именно то, что мне нужно! Я заметил, что я могу запустить анимацию, которую вы сделали в первый раз правильно, но тогда мой браузер (Chrome) не может сделать это в другое время. Вы знаете, почему это происходит? Могу ли я повторить анимацию в любое время, когда я нажму на нее правильно? – pablobs88
Firefox работает, поэтому я предполагаю, что это ошибка Chrome. Вы можете попытаться сообщить об этом [их bugtracker] (https://bugs.chromium.org/p/chromium/issues/list) –
Еще раз большое спасибо Роберту. Я сообщил об этом. Я надеюсь, что кто-то найдет для него решение. – pablobs88