在 SVG 路径动画中为 SVG 设置动画

Posted 2023-05-08

【中文标题】在 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>