Как я могу повторно использовать путь с преобразованиями внутри 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, но добавив transform="rotate(180)" к mpath. Это не помогло.

В конечном счете мне не нужно рисовать пути, я хочу только двигаться по ним, но я хочу использовать преобразования вместо дублирования определения пути.

Answer 1

Я нашел лучший способ: нарисуйте вторую спираль и круг внутри g, который преобразует все.

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