animateMotion内の変換でパスを再利用するにはどうすればよいですか？

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に固執しようとしましたが、mpathにはtransform="rotate(180)"を追加しました。それは助けになりませんでした。

最終的に私はパスを描く必要はなく、移動したいだけですが、パス定義を複製する代わりに変換を使用したいと思います。

Answer 1

私はより良い方法を見つけました：すべてを変換するgの内側に2番目の螺旋と円を描きます。

<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>