Question

在下面的代码中，我有一个螺旋路径，一个旋转180度的路径副本，以及一个沿原路径移动的圆圈。

<svg width="100" height="100">
  <g transform="translate(50 50) scale(3)">
    <path id="spiral1" stroke="grey" stroke-width="2" fill="none" d="M 3.108,0 C 3.178,0.407 3.171,0.842 3.074,1.273 S 2.791,2.132 2.519,2.519 S 1.887,3.253 1.46,3.524 S 0.534,3.991 0,4.084 S -1.107,4.167 -1.673,4.04 S -2.802,3.668 -3.311,3.311 S -4.275,2.48 -4.631,1.918 S -5.245,0.702 -5.367,0 S -5.476,-1.455 -5.309,-2.199 S -4.821,-3.683 -4.351,-4.351 S -3.26,-5.618 -2.521,-6.087 S -0.922,-6.893 0,-7.054 S 1.912,-7.197 2.89,-6.978 S 4.84,-6.336 5.718,-5.718 S 7.384,-4.284 7.999,-3.313 S 9.059,-1.212 9.27,0 S 9.458,2.513 9.17,3.798 S 8.327,6.361 7.515,7.515 S 5.63,9.704 4.355,10.513 S 1.593,11.906 0,12.183 S -3.302,12.43 -4.992,12.052 S -8.36,10.943 -9.876,9.876 S -12.753,7.399 -13.816,5.723 S -15.647,2.094 -16.012,0"/>
    <use id="spiral2" xlink:href="#spiral1" transform="rotate(180)" />
    <circle cx="" cy="" r="2" fill="red">
      <animateMotion dur="1s" repeatCount="indefinite">
        <mpath xlink:href="#spiral1" />
      </animateMotion>
    </circle>
  </g>
</svg>

我希望第二个圆圈沿着旋转的路径移动。但是当我更改<mpath xlink:href="#spiral1" />以使用#spiral2时，圆圈不再移动。我还尝试坚持spiral1，但将transform="rotate(180)"添加到mpath。它没有帮助。

最终我不需要绘制路径，我只想沿着它们移动，但我想使用转换而不是复制路径定义。

Answer 1

我找到了一个更好的方法：绘制第二个螺旋并在g内圈出来，它会改变一切。

＆＃13;

<svg width="100" height="100">
  <g transform="translate(50 50) scale(3)">
    <path id="spiral1" stroke="grey" stroke-width="2" fill="none" d="M 3.108,0 C 3.178,0.407 3.171,0.842 3.074,1.273 S 2.791,2.132 2.519,2.519 S 1.887,3.253 1.46,3.524 S 0.534,3.991 0,4.084 S -1.107,4.167 -1.673,4.04 S -2.802,3.668 -3.311,3.311 S -4.275,2.48 -4.631,1.918 S -5.245,0.702 -5.367,0 S -5.476,-1.455 -5.309,-2.199 S -4.821,-3.683 -4.351,-4.351 S -3.26,-5.618 -2.521,-6.087 S -0.922,-6.893 0,-7.054 S 1.912,-7.197 2.89,-6.978 S 4.84,-6.336 5.718,-5.718 S 7.384,-4.284 7.999,-3.313 S 9.059,-1.212 9.27,0 S 9.458,2.513 9.17,3.798 S 8.327,6.361 7.515,7.515 S 5.63,9.704 4.355,10.513 S 1.593,11.906 0,12.183 S -3.302,12.43 -4.992,12.052 S -8.36,10.943 -9.876,9.876 S -12.753,7.399 -13.816,5.723 S -15.647,2.094 -16.012,0"
    />
    <circle cx="" cy="" r="2" fill="red">
      <animateMotion dur="1s" repeatCount="indefinite">
        <mpath xlink:href="#spiral1" />
      </animateMotion>
    </circle>
    <g transform="rotate(180)">
      <use id="spiral2" xlink:href="#spiral1" />
      <circle cx="" cy="" r="2" fill="red">
        <animateMotion dur="1s" repeatCount="indefinite">
          <mpath xlink:href="#spiral1" />
        </animateMotion>
      </circle>
    </g>
  </g>
</svg>

＆＃13;

如何在animateMotion中重用具有转换的路径？

1 个答案: