如何在运动路径上有效地反转SVG(SMIL)动画?

document.getElementById("svgobject").pauseAnimations(); < svg版本="1.1" id ="svgobject" xmlns ="http://www.w3.org/2000/svg"xmlns:xlink =" http://www.w3.org/1999/xlink"x =" 0px"y =" 0px"width =" 451.5px"height =" 451.5px"viewBox =" 0 0 461.5 461.5"enable-background ="new 0 0 461.5 461.5" xml:space ="preserve">< g>< path fill ="none" stroke ="black"d ="M446.85,280.187c0,30.296-24.56,54.854-54.854,54.854H60.239c-30.296,0-54.854-24.559-54.854-54.854l0,0c0-30.296,24.559-54.854,54.854-54.854h331.756C422.29,225.333，446.85,249.891,446.85,280.187L446.85,280.187z"/>< rect id ="rect" x ="0" y ="0" width ="50" height ="20" fill =灰色" stroke ="black" stroke-width ="1" transform ="translate(-25，-10)>< animateMotion path ="M446.85,280.187c0,30.296-24.56,54.854-54.854,54.854H60.239c-30.296,0-54.854-24.559-54.854-54.854l0,0c0-30.296,24.559-54.854,54.854-54.854h331.756C422.29,225.333,446.85,249.891,446.85,280.187L446.85,280.187zbegin ="0s" dur ="2s" repeatCount ="1" rotation ="auto" fill ="freeze"/></rect></g><！-开始和停止动画->< g onclick ="document.getElementById('svgobject').unpauseAnimations()"transform ="translate(160100)">< rect width ="60" height ="30" rx ="10" stroke ="black" fill-opacity ="0.2"/>< text style ="font:16px Arial黑色；填充:白色；笔触:黑色；"transform ="translate(2 20)"> START</text></g>< g onclick ="document.getElementById('svgobject').pauseAnimations()"transform ="translate(260 100)">< rect width ="60" height ="30" rx ="10" stroke ="black" fill-opacity ="0.2"/>< text style ="font:16px Arial黑色；填充:白色；笔触:黑色；"transform ="translate(5 20)"> STOP</text></g></svg> 我了解我可以手动反转SVG路径数据命令，包括moveto(M，m)，lineto(L，l)，curveto(C，c)等.鉴于我需要反转的路径坐标数量(除了此动画中的坐标之外)，我试图确定是否有更有效的方法来实现此目的.解决方案您可以使用 keyPoints 和 keyTimes 属性来反转动画的方向. < animateMotion path ="..." begin ="0s" dur ="2s" repeatCount ="1" rotation ="auto"fill ="freeze" keyPoints ="1; 0" keyTimes ="0; 1"> 在这里，我们告诉运动从1(路径的结束)到0(路径的开始)运行.这在Firefox中有效，但不幸的是在Chrome中不起作用.Chrome似乎有问题. 更新: 我发现与此有关的Chrome错误: https://code.google.com/p/chromium/issues/detail?id = 353108 如果calcMode为"paced"(默认为paced)，则keyTimes似乎已损坏.如果将其更改为其他内容，例如线性:动画也可以在Chrome浏览器中正常工作. < animateMotion path ="..." begin ="0s" dur ="2s" repeatCount ="1" rotation ="auto"fill ="freeze" keyPoints ="1; 0" keyTimes ="0; 1" calcMode ="linear"> 此处演示此处更新了Codepen I am trying to determine how to efficiently reverse this SVG animation (with SMIL) which uses animateMotion and the d attribute on the path element. I need the animation to run counterclockwise around the shape.The current animation can be found here and the relevant code is as follows.document.getElementById("svgobject").pauseAnimations();<svg version="1.1" id="svgobject" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="451.5px" height="451.5px" viewBox="0 0 461.5 461.5" enable-background="new 0 0 461.5 461.5" xml:space="preserve"> <g> <path fill="none" stroke="black" d="M446.85,280.187c0,30.296-24.56,54.854-54.854,54.854H60.239c-30.296,0-54.854-24.559-54.854-54.854l0,0c0-30.296,24.559-54.854,54.854-54.854h331.756C422.29,225.333,446.85,249.891,446.85,280.187L446.85,280.187z"/> <rect id="rect" x="0" y="0" width="50" height="20" fill="gray" stroke="black" stroke-width="1" transform="translate(-25, -10)"> <animateMotion path="M446.85,280.187c0,30.296-24.56,54.854-54.854,54.854H60.239c-30.296,0-54.854-24.559-54.854-54.854l0,0c0-30.296,24.559-54.854,54.854-54.854h331.756C422.29,225.333,446.85,249.891,446.85,280.187L446.85,280.187z" begin= "0s" dur="2s" repeatCount="1" rotate="auto" fill="freeze" /> </rect> </g>  <g onclick="document.getElementById('svgobject').unpauseAnimations()" transform="translate(160 100)"> <rect width="60" height="30" rx="10" stroke="black" fill-opacity="0.2"/> <text style="font: 16px Arial Black; fill: white; stroke: black;" transform="translate(2 20)">START</text> </g> <g onclick="document.getElementById('svgobject').pauseAnimations()" transform="translate(260 100)"> <rect width="60" height="30" rx="10" stroke="black" fill-opacity="0.2"/> <text style="font: 16px Arial Black; fill: white; stroke: black;" transform="translate(5 20)">STOP</text> </g></svg>I understand that I can manually reverse the SVG path data commands including moveto (M,m), lineto (L,l), curveto (C,c), etc.Given the amount of path coordinates that I'll need to reverse (in addition to those in this animation), I'm trying to determine if there is a more efficient way to do this. 解决方案 You can reverse the direction of your animation by using the keyPoints and keyTimes attributes.<animateMotion path="..." begin= "0s" dur="2s" repeatCount="1" rotate="auto" fill="freeze" keyPoints="1;0" keyTimes="0;1">Here we are telling the motion to run from 1 (end of the path) to 0 (start of the path).This works in Firefox, but unfortunately not in Chrome. It seems Chrome is bugged.Update:I found the Chrome bug related to this: https://code.google.com/p/chromium/issues/detail?id=353108It seems keyTimes is broken if the calcMode is "paced" (which it defaults to). If you change it to something else, like "linear: the animation works correctly in Chrome also.<animateMotion path="..." begin= "0s" dur="2s" repeatCount="1" rotate="auto" fill="freeze" keyPoints="1;0" keyTimes="0;1" calcMode="linear">Demo hereUpdated Codepen here 这篇关于如何在运动路径上有效地反转SVG(SMIL)动画?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！上岸，阿里云！