主页 / coding / 问题 / 79136809
Accepted
Bumbling Badger
Asked: 2024-10-29 18:36:46 +0800 CST

SVG rotate="auto" 的行为不符合预期

  • 772

我正在尝试制作幼苗生长的动画。计划是让叶子沿着茎的路径生长（用虚线表示）。现在这个方法可行（经过一些尝试和错误）。但是，我希望叶子能够沿着路径旋转（从底部中心开始）（理想情况下，在移动时生长）。

当我将旋转设置为“自动”时，结果并不像我所预料的那样。

<svg width="150" height="150" viewBox="0 0 150 150">
  <path fill="none" stroke="black" stroke-width="1px" stroke-dasharray="5" id="stem" d="m 29.7,149.1
c 0.3,-1 1.7,-8.6 -0.7,-20.1 -4.3,-20.6 -5.7,-48.9 42.1,-52"/>
  <path id="leaves" d="M 8.5,132.8
C 14.3,133 16.4,132.5 19.9,135.4 23.2,138.2 29.6,144.2 28.5,148.6
L 29.6,149 30.4,149.2
C 32.6,144.2 35.2,140.7 39.3,137.4 43.7,133.9 49.6,133.2 56.9,133.1 56.9,133.1 47.1,126.3 39.5,129.3 31.1,132.8 33.8,138.4 29.7,148.4 29.6,143.6 27.9,132 22.8,130 16.5,127.5 8.5,132.7 8.5,132.7
Z">
      <animateMotion
        dur="1s"
        repeatCount="1"
        rotate="auto"
        begin="leaves.click" fill="freeze" path="M 0,0
C 0.3,-1 1.7,-8.6 -0.7,-20.1 -5,-40.7 -6.4,-69 41.400002,-72.1"/>
</path>
</svg>

我认为路径可能存在问题，因此我尝试使用相对路径和绝对路径，但两者的结果相同。

animation

1 个回答

  1. Best Answer

    更改了所有路径：https: //yqnn.github.io/svg-path-editor/#

    • 乘以10以消除.n小数表示法但保持准确性

    • 使所有路径都成为相对符号

    • viewBox 增加10

    • 改变 叶子，使“茎”起源于0,0原点
      ！！这是让旋转动画位于正确位置的重要步骤。
      需要从 d 路径开始，m160 -210因为叶子是从叶子开始绘制的……而不是茎

    • 将叶子额外旋转90 度，使它们指向 x 轴（动画方向）

    • 更改了 viewBox 以便整个动画可见

    • visibility防止叶子上出现 FOUC 的技巧（现在最初在0,0原点绘制）

    <svg width="150" viewBox="-200 -200 1200 1200" style="background:pink">
  <path id="stem" fill="none" 
        stroke="black" stroke-width="5px" stroke-dasharray="50" 
        d="m297 750c3-10 17-86-7-201-43-206-57-489 421-520"/>
  <path id="leaves" visibility="hidden" fill="green"
        d="m160-210c-2 58 3 79-26 114-28 33-88 97-132 86l-4 11-2 8
           c50 22 85 48 118 89 35 44 42 103 43 176 0 0 68-98 38-174-35
           -84-91-57-191-98 48-1 164-18 184-69 25-63-27-143-27-143z">
    <set attributeName="visibility" from="hidden" to="visible" begin=".01s" />
    <animateMotion begin="0s" dur="3s"
                   rotate="auto" repeatCount="indefinite" fill="freeze">
       <mpath href="#stem"/>
    </animateMotion>
  </path>
</svg>

    • 2

相关问题