关键词：
【中文标题】在 SVG 路径动画中为 SVG 设置动画【英文标题】：Animate a SVG in a SVG path Animation 【发布时间】：2020-01-29 20:16:05 【问题描述】：我已经建立了一个路径动画，但是我在 svg 中的锯片有问题。
我想为 Sawblade 制作动画（旋转 360 度）。
<style>html
background-color: #337ab7;
.cutline
stroke: #222;
stroke-width: .1%;
stroke-width: .5%;
stroke-dasharray: 1% 2%;
stroke-linecap: round;
fill: none;
.sawblade
fill: #eee;
width: 200px;
height: auto;
margin: 30px;
</style>
<svg viewBox="0 0 3387 1270">
<path id="cutline" class="cutline" d="M 2700 1000 L 100 1000 " />
<g class="sawblade">
<path id="sawblade" d="M1089.22,696.4s15.26-47.61-89.24-73.22c-1.24-.3-2.45-.58-3.65-.84,20.57-19,50.83-37.45,85.5-28.49,0,0,2.29-50-105.27-47.38-1.2,0-2.36.08-3.51.13C988,523,1012.33,497.42,1048,497c0,0-10.8-48.82-114-18.32l-1.63.49c8.62-26.2,25.66-55.9,59.27-65.14,0,0-22.88-44.46-114.87,11.33-1.1.66-2.15,1.32-3.18,2,1.12-28,9.45-62.41,40.3-80.6,0,0-33.69-36.94-107.93,40.94-.82.87-1.62,1.72-2.39,2.57-6.15-27.25-7-62.55,18-88.07,0,0-42.16-26.89-93.55,67.63-.27.51-.53,1-.8,1.5-12.43-24.62-21.38-57.66-4.15-88,0,0-47.61-15.25-73.22,89.24-.3,1.24-.58,2.46-.84,3.65-19-20.57-37.45-50.82-28.49-85.49,0,0-50-2.3-47.38,105.26,0,1.2.08,2.37.13,3.52-23.62-14.93-49.18-39.29-49.56-75,0,0-48.82,10.79-18.32,114,.16.55.32,1.09.49,1.62-26.2-8.61-55.9-25.66-65.14-59.27,0,0-44.46,22.88,11.33,114.88q1,1.64,2,3.18c-28-1.12-62.42-9.46-80.6-40.31,0,0-36.94,33.7,40.94,107.93.86.83,1.72,1.62,2.57,2.4-27.25,6.15-62.55,7-88.07-18,0,0-26.89,42.15,67.63,93.54l1.5.8c-24.62,12.44-57.66,21.38-88,4.15,0,0-15.26,47.62,89.24,73.22,1.24.31,2.46.58,3.65.85-20.57,19-50.82,37.44-85.49,28.49,0,0-2.3,49.94,105.26,47.37,1.2,0,2.37-.07,3.52-.13-14.93,23.63-39.29,49.19-75,49.57,0,0,10.79,48.82,114,18.32l1.62-.5c-8.61,26.21-25.66,55.9-59.27,65.14,0,0,22.88,44.46,114.88-11.32,1.09-.67,2.15-1.33,3.18-2-1.12,28-9.46,62.42-40.31,80.6,0,0,33.7,36.94,107.93-40.93.83-.87,1.62-1.73,2.4-2.58,6.15,27.26,7,62.56-18,88.07,0,0,42.15,26.89,93.54-67.63.28-.51.54-1,.8-1.5,12.44,24.62,21.38,57.67,4.15,88,0,0,47.62,15.26,73.22-89.24.31-1.24.58-2.45.85-3.65,19,20.57,37.44,50.83,28.49,85.5,0,0,49.94,2.29,47.37-105.27,0-1.2-.07-2.36-.13-3.51,23.63,14.92,49.18,39.28,49.57,75,0,0,48.82-10.8,18.32-114-.16-.55-.33-1.09-.5-1.63,26.21,8.62,55.9,25.66,65.14,59.27,0,0,44.46-22.88-11.32-114.87-.67-1.1-1.33-2.15-2-3.18,28,1.12,62.42,9.46,80.6,40.31,0,0,36.94-33.7-40.93-107.94-.87-.82-1.73-1.62-2.58-2.39,27.26-6.15,62.56-7,88.07,18,0,0,26.89-42.16-67.63-93.55l-1.5-.8C1025.87,688.12,1058.92,679.17,1089.22,696.4Zm-442.7-23.46a53.14,53.14,0,1,1,53.14,53.14A53.15,53.15,0,0,1,646.52,672.94Z" transform="translate(-309.32 -282.6)"/>
</g>
<!-- Define the motion path animation -->
<animateMotion xlink:href="#sawblade" dur="2s" repeatCount="indefinite" rotate="auto" >
<mpath xlink:href="#cutline" />
</animateMotion>
</svg>你能帮帮我吗？
【问题讨论】：
【参考方案1】：您可以将两个动画都放在需要动画的元素中。我正在使用<animateTransform> 旋转锯片，使用<animateMotion> 在路径上移动锯片。或者，您可以在这里翻译形状。
我稍微改变了路径，因为我想消除translate。实际上，我使用了这个工具：Lea Verou 的Convert SVG path to all-relative or all-absolute 将路径更改为小写命令。接下来，我将路径的起点修改为用于翻译的数量。
html
background-color: #337ab7;
.cutline
stroke: #222;
stroke-width: .1%;
stroke-width: .5%;
stroke-dasharray: 1% 2%;
stroke-linecap: round;
fill: none;
.sawblade
fill: #eee;
width: 200px;
height: auto;
margin: 30px;
<svg viewBox="0 0 3387 1270">
<path id="cutline" class="cutline" d="M 2700 1000 L 100 1000 " />
<g class="sawblade" >
<path id="sawblade" d="M779.9,413.8s15.26,-47.61,-89.24,-73.22c-1.24,-0.3,-2.45,-0.58,-3.65,-0.84c20.57,-19,50.83,-37.45,85.5,-28.49c0,0,2.29,-50,-105.27,-47.38c-1.2,0,-2.36,0.08,-3.51,0.13c14.95,-23.6,39.28,-49.18,74.95,-49.6c0,0,-10.8,-48.82,-114,-18.32l-1.63,0.49c8.62,-26.2,25.66,-55.9,59.27,-65.14c0,0,-22.88,-44.46,-114.87,11.33c-1.1,0.66,-2.15,1.32,-3.18,2c1.12,-28,9.45,-62.41,40.3,-80.6c0,0,-33.69,-36.94,-107.93,40.94c-0.82,0.87,-1.62,1.72,-2.39,2.57c-6.15,-27.25,-7,-62.55,18,-88.07c0,0,-42.16,-26.89,-93.55,67.63c-0.27,0.51,-0.53,1,-0.8,1.5c-12.43,-24.62,-21.38,-57.66,-4.15,-88c0,0,-47.61,-15.25,-73.22,89.24c-0.3,1.24,-0.58,2.46,-0.84,3.65c-19,-20.57,-37.45,-50.82,-28.49,-85.49c0,0,-50,-2.3,-47.38,105.26c0,1.2,0.08,2.37,0.13,3.52c-23.62,-14.93,-49.18,-39.29,-49.56,-75c0,0,-48.82,10.79,-18.32,114c0.16,0.55,0.32,1.09,0.49,1.62c-26.2,-8.61,-55.9,-25.66,-65.14,-59.27c0,0,-44.46,22.88,11.33,114.88q1,1.64,2,3.18c-28,-1.12,-62.42,-9.46,-80.6,-40.31c0,0,-36.94,33.7,40.94,107.93c0.86,0.83,1.72,1.62,2.57,2.4c-27.25,6.15,-62.55,7,-88.07,-18c0,0,-26.89,42.15,67.63,93.54l1.5,0.8c-24.62,12.44,-57.66,21.38,-88,4.15c0,0,-15.26,47.62,89.24,73.22c1.24,0.31,2.46,0.58,3.65,0.85c-20.57,19,-50.82,37.44,-85.49,28.49c0,0,-2.3,49.94,105.26,47.37c1.2,0,2.37,-0.07,3.52,-0.13c-14.93,23.63,-39.29,49.19,-75,49.57c0,0,10.79,48.82,114,18.32l1.62,-0.5c-8.61,26.21,-25.66,55.9,-59.27,65.14c0,0,22.88,44.46,114.88,-11.32c1.09,-0.67,2.15,-1.33,3.18,-2c-1.12,28,-9.46,62.42,-40.31,80.6c0,0,33.7,36.94,107.93,-40.93c0.83,-0.87,1.62,-1.73,2.4,-2.58c6.15,27.26,7,62.56,-18,88.07c0,0,42.15,26.89,93.54,-67.63c0.28,-0.51,0.54,-1,0.8,-1.5c12.44,24.62,21.38,57.67,4.15,88c0,0,47.62,15.26,73.22,-89.24c0.31,-1.24,0.58,-2.45,0.85,-3.65c19,20.57,37.44,50.83,28.49,85.5c0,0,49.94,2.29,47.37,-105.27c0,-1.2,-0.07,-2.36,-0.13,-3.51c23.63,14.92,49.18,39.28,49.57,75c0,0,48.82,-10.8,18.32,-114c-0.16,-0.55,-0.33,-1.09,-0.5,-1.63c26.21,8.62,55.9,25.66,65.14,59.27c0,0,44.46,-22.88,-11.32,-114.87c-0.67,-1.1,-1.33,-2.15,-2,-3.18c28,1.12,62.42,9.46,80.6,40.31c0,0,36.94,-33.7,-40.93,-107.94c-0.87,-0.82,-1.73,-1.62,-2.58,-2.39c27.26,-6.15,62.56,-7,88.07,18c0,0,26.89,-42.16,-67.63,-93.55l-1.5,-0.8c24.69,-12.4,57.74,-21.35,88.04,-4.12zm-442.7,-23.46a53.14,53.14,0,1,1,53.14,53.14a53.15,53.15,0,0,1,-53.14,-53.14z" >
<animateTransform attributeType="xml" attributeName="transform" type="rotate" values="360 390.35 390.35; 0 390.35 390.35" dur="5s" repeatCount="indefinite"></animateTransform>
<animateMotion dur="5s" repeatCount="indefinite" rotate="auto" >
<mpath xlink:href="#cutline" />
</animateMotion>
</path>
</g>
</svg>【讨论】：
加载窗口时在路径上设置 SVG 动画
】加载窗口时在路径上设置SVG动画【英文标题】：AnimatingSVGonapathwhenwindowloads【发布时间】：2021-05-3109:53:32【问题描述】：我有一个SVG，当范围滑块移动时，它会沿着路径设置动画：AnimatingSVGonacurvedpathinInternetExplorer但是，我希望... 查看详情
在 svg 路径更改后再次执行动画
】在svg路径更改后再次执行动画【英文标题】：Makeanimateexecuteagainaftersvgpathchanges【发布时间】：2022-01-2405:40:04【问题描述】：我想为svg路径设置动画，使动画只运行一次，但是如果d值发生变化，那么动画应该再次运行一次。每... 查看详情
如何在浏览器中为 SVG 动画添加硬件加速？
】如何在浏览器中为SVG动画添加硬件加速？【英文标题】：HowtoaddhardwareaccelerationforSVGAnimationinbrowser?【发布时间】：2021-09-1304:27:26【问题描述】：我正在尝试在我的HTML5画布游戏中添加SVG动画。SVG动画硬件加速了吗？我们有哪些... 查看详情
SVG按钮路径动画
】SVG按钮路径动画【英文标题】：Svgbuttonpathanimation【发布时间】：2021-12-1910:37:46【问题描述】：我有这个SVG按钮，我试图在悬停时设置动画。我希望按钮在悬停时产生斑点效果。我希望你们能帮助我。这是SVG的链接https://codepen.i... 查看详情
使用填充为 svg 设置动画
...间】：2015-04-1201:19:40【问题描述】：如何使用ilustrator的路径svg制作动画。在完成制作对象后，我从ilustratorcs6获得了svg代码（路径）。对于动画，我使用的是没有javascript的css3（动画）。所以，我将svg代码放入html文件和对象的动... 查看详情
在 Internet Explorer 中的曲线路径上为 SVG 设置动画
】在InternetExplorer中的曲线路径上为SVG设置动画【英文标题】：AnimatingSVGonacurvedpathinInternetExplorer【发布时间】：2021-05-2603:57:43【问题描述】：我正在尝试根据这篇文章沿路径制作动画：moveSVGgrouponpathtrailbasedonpercentageofwholepathtrail... 查看详情
如何在reactnative中为svg坐标设置动画？(代码片段)
...可以根据状态变量获取更新坐标，但我希望能够为其设置动画，以便多边形平滑变换。现在代码是这样的：<Svg><Polygonpoints=this.state.a*44.9+',0'+this.state.b+',0475,20'/></Svg>当我将Polygon设置为Animated.Component并生成状态变量Ani... 查看详情
在动画上滴 SVG 剪辑路径
】在动画上滴SVG剪辑路径【英文标题】：DrippingSVGclip-pathonanimation【发布时间】：2022-01-1305:37:36【问题描述】：在下面的示例中，我应用了一个剪辑路径并为该路径中的一个块设置动画以模拟浇注。问题是，虽然它看起来在Safari... 查看详情
使用不连续部分为 SVG 路径设置动画
】使用不连续部分为SVG路径设置动画【英文标题】：AnimatingSVGpathswithdiscontinuousparts【发布时间】：2017-02-1505:26:40【问题描述】：在左边的例子中，路径是连续的（即没有m命令），因此路径的段是一个接一个地绘制的。在右侧示... 查看详情
仅在将鼠标悬停在圆圈上时才沿文本路径为 SVG 文本设置动画
】仅在将鼠标悬停在圆圈上时才沿文本路径为SVG文本设置动画【英文标题】：AnimateSVGtextalongatext-pathonlywhenhoveringoveracircle【发布时间】：2018-06-2908:56:11【问题描述】：我想将动画从HTML移动到css。仅当您将鼠标悬停在<circleid=&... 查看详情
带有 d: 路径的 Svg 动画
】带有d:路径的Svg动画【英文标题】：Svganimationwithd:path【发布时间】：2022-01-1406:21:21【问题描述】：我正在尝试按照thiscodepen使用path属性为我的svg设置动画，但我的动画路径并不顺畅，并且有一些奇怪的步骤。path值是否有问题... 查看详情
React Native Reanimated 2 为 SVG 路径的长度设置动画
】ReactNativeReanimated2为SVG路径的长度设置动画【英文标题】：ReactNativeReanimated2animatingthelengthofanSVGPath【发布时间】：2021-06-0920:11:26【问题描述】：我正在尝试将SVG路径的长度从0动画化到ReactNativeReanimated2中的全长。这是我的示例路... 查看详情
给定路径的 Svg 填充动画
】给定路径的Svg填充动画【英文标题】：Svgfillanimationforthegivenpath【发布时间】：2017-08-1514:52:26【问题描述】：我正在尝试从左到右为箭头设置动画。我的箭头路径的代码如下：<svgid="svg_circle"viewBox=\'00450400\'><gtransform="transl... 查看详情
是否可以创建 Html 标签将遵循 svg 路径动画的动画？
】是否可以创建Html标签将遵循svg路径动画的动画？【英文标题】：IsitpossiblecreateanimationwhereHtmltagwillfollowsvgpathanimation?【发布时间】：2021-11-2415:41:30【问题描述】：我正在使用svg路径在javascript中创建自定义进度动画。我从后端获... 查看详情
SVG 剪辑路径动画在 Firefox 上不起作用
】SVG剪辑路径动画在Firefox上不起作用【英文标题】：SVGclippathanimationnotworkingonFirefox【发布时间】：2019-09-0321:11:15【问题描述】：我正在研究SVG动画。完成了那个开发部分。它适用于Chrome，但不适用于Firefox。我认为1clippath标签路... 查看详情
SVG 剪切路径无法与 CSS 动画一起正常工作
】SVG剪切路径无法与CSS动画一起正常工作【英文标题】：SVGclippingpathnotworkingcorrectlywithCSSanimation【发布时间】：2020-02-2622:34:03【问题描述】：剪切路径与我屏蔽的对象一起动画。我希望剪切路径保持原样，以便我可以为下面的对... 查看详情
如何为 SVG 多边形设置动画以进行填充？
...不可见。我已经尝试过关键帧描边，但由于它们不是基于路径而是基于多边形的点，所以它不起作用。< 查看详情
绘制 svg 虚线的动画
...线的箭头设置动画，类似于------->，但具有水平和垂直路径。我尝试了几种不同的方法，动画高度和宽度，使用底部和顶部，但每种方式都有一些看起来不太好或效果不佳的东西。我设法用svg绘制了一条路径，但动画实际上会... 查看详情