Анимировать svg на нарисованном пути

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

<g id="XMLID_5_" >
        <path id="XMLID_38_" class="st9" d="M198.7,67.8c-73.6,0-133.3,59.7-133.3,133.3s59.7,133.3,133.3,133.3S332,274.7,332,201.1
            S272.3,67.8,198.7,67.8z M199.1,330.6c-71.8,0-129.9-58.2-129.9-129.9S127.3,70.8,199.1,70.8S329,129,329,200.7
            S270.8,330.6,199.1,330.6z"/>
        <path id="XMLID_15_" class="st3" d="M303.5,107c0,7-4.8,12.7-12.7,12.7c-7.9,0-12.6-5.7-12.6-12.7c0-7,4.8-12.7,12.6-12.7 C298.5,94.3,303.5,100,303.5,107"/>
        <animateMotion 
           xlink:href="#XMLID_15_"
           dur="5s"
           begin="0s"
           repeatCount="indefinite">
            <mpath xlink:href="#XMLID_38_"/>
      </animateMotion>
    </g>

первый путь - это линия, а второй путь - это круг. не знаю, как преобразовать его в .


svg html svg-animate
person ljdayekh    schedule 24.06.2020    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Путь, который вы анимируете, должен иметь центр в начале холста svg. Вы можете либо переписать код пути, либо перевести его в источник

<svg viewBox="60 60 360 360" width="300">
<g id="XMLID_5_" >
        <path id="XMLID_38_" class="st9" d="M198.7,67.8c-73.6,0-133.3,59.7-133.3,133.3s59.7,133.3,133.3,133.3S332,274.7,332,201.1
            S272.3,67.8,198.7,67.8z M199.1,330.6c-71.8,0-129.9-58.2-129.9-129.9S127.3,70.8,199.1,70.8S329,129,329,200.7
            S270.8,330.6,199.1,330.6z"/>
        <path id="XMLID_15_" class="st3" transform="translate(-290.85,-107)" d="M303.5,107c0,7-4.8,12.7-12.7,12.7c-7.9,0-12.6-5.7-12.6-12.7c0-7,4.8-12.7,12.6-12.7 C298.5,94.3,303.5,100,303.5,107"/>
        <animateMotion 
           xlink:href="#XMLID_15_"
           dur="5s"
           begin="0s"
           repeatCount="indefinite">
            <mpath xlink:href="#XMLID_38_"/>
      </animateMotion>
    </g>
</svg>

Это второй пример, в котором я переписал путь #XMLID_15_ (это путь, который должен быть анимирован). Чтобы переписать путь, я преобразовал ваш во все-относительный путь с помощью этого пера: https://codepen.io/leaverou/pen/RmwzKv

Как только я получу его для всех относительных, я могу изменить первый ход на команду (M), установив значения для фактического центра из координат перемещения.

<svg viewBox="60 60 360 360" width="300">
<g id="XMLID_5_" >
        <path id="XMLID_38_" class="st9" d="M198.7,67.8c-73.6,0-133.3,59.7-133.3,133.3s59.7,133.3,133.3,133.3S332,274.7,332,201.1
            S272.3,67.8,198.7,67.8z M199.1,330.6c-71.8,0-129.9-58.2-129.9-129.9S127.3,70.8,199.1,70.8S329,129,329,200.7
            S270.8,330.6,199.1,330.6z"/>
        <path id="XMLID_15_" class="st3"  d="M12.65,0c0,7,-4.8,12.7,-12.7,12.7c-7.9,0,-12.6,-5.7,-12.6,-12.7c0,-7,4.8,-12.7,12.6,-12.7c7.7,0,12.7,5.7,12.7,12.7"/>
        <animateMotion 
           xlink:href="#XMLID_15_"
           dur="5s"
           begin="0s"
           repeatCount="indefinite">
            <mpath xlink:href="#XMLID_38_"/>
      </animateMotion>
    </g>
</svg>

НАБЛЮДЕНИЕ:

Если вы спрашиваете себя, почему это странное движение: путь #XMLID_38_ — это путь с дырой, где вы рисуете первую часть пути в одном направлении, затем вы перемещаетесь в другую точку и рисуете дыру в противоположном направлении. Вот почему анимированная фигура сначала движется в одном направлении, затем перескакивает в другую точку и продолжает двигаться в противоположном направлении, как путь, который вы используете в качестве дорожки.

person enxaneta    schedule 24.06.2020
comment
Спасибо @enxaneta за очень полезное объяснение! да я тоже заметил что-то странное с движением сейчас проверю путь. Но по какой-то причине, когда вы обновляете страницу, круг отображается в правом верхнем углу div на секунду, а затем возвращается на исходный путь. - person ljdayekh; 24.06.2020
comment
Попробуйте begin="-1s" - person enxaneta; 24.06.2020