4

Добрый день, подскажите как сделать так что бы "ползунок" не "дрифтовал" по графику, а плавно перетекал, как капля, и повторял изгибы графика?

<svg width="1068" height="519" viewBox="0 0 1068 519" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Process</title>
<desc>Created using Figma</desc>


<path id="motionPath" fill="#333" stroke="#000000" stroke-miterlimit="10" d="M1053.33,192.78V308.55a150.46,150.46,0,1,1-300.91,0V192.78a108,108,0,1,0-216,0v106a160.24,160.24,0,1,1-320.48,0V108A108,108,0,1,0,0,108H4a104,104,0,1,1,208,0V298.76a164.24,164.24,0,1,0,328.48,0v-106a104,104,0,1,1,208,0V308.55a154.46,154.46,0,1,0,308.91,0V192.78Z"/>
 <circle cx="1	" cy="110" r="7" fill="#333"  />
 <circle cx="1055" cy="190" r="7" fill="#333"  />

<rect id="worm" x="50" y="20" rx="5" ry="5" width="65" height="10" style="fill:#333;" />
<animateTransform begin="worm.end" id="pause" dur="3s" type="translate" attributeType="XML" attributeName="transform"/>
<animateMotion 
    xlink:href="#worm"
    dur="10s"
    begin="0; pause.end"
    fill="freeze"
    repeatCount="indefinite" 
    rotate="auto-reverse"
>
    <mpath xlink:href="#motionPath" />
  </animateMotion>
</svg>

1 ответ 1

5

если использовать rect, то как вариант решения, можно так

<svg width="1068" height="519" viewBox="0 0 1068 519" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Process</title>
<desc>Created using Figma</desc>


<path id="motionPath" fill="#333" stroke="#000000" stroke-miterlimit="10" d="M1053.33,192.78V308.55a150.46,150.46,0,1,1-300.91,0V192.78a108,108,0,1,0-216,0v106a160.24,160.24,0,1,1-320.48,0V108A108,108,0,1,0,0,108H4a104,104,0,1,1,208,0V298.76a164.24,164.24,0,1,0,328.48,0v-106a104,104,0,1,1,208,0V308.55a154.46,154.46,0,1,0,308.91,0V192.78Z"/>
 <circle cx="1	" cy="110" r="7" fill="#333"  />
 <circle cx="1055" cy="190" r="7" fill="#333"  />

<rect id="worm" x="0" y="0" rx="5" ry="5" width="15" height="10" style="fill:#333;" />
<rect id="worm1" x="0" y="0" rx="5" ry="5" width="15" height="10" style="fill:#333;" />
<rect id="worm2" x="0" y="0" rx="5" ry="5" width="15" height="10" style="fill:#333;" />
<rect id="worm3" x="0" y="0" rx="5" ry="5" width="15" height="10" style="fill:#333;" />
<animateTransform begin="worm.end" id="pause" dur="3s" type="translate" attributeType="XML" attributeName="transform"/>
<animateMotion 
    xlink:href="#worm"
    dur="10s"
    begin="0; pause.end"
    fill="freeze"
    repeatCount="indefinite" 
    rotate="auto-reverse"
>
    <mpath xlink:href="#motionPath" />
  </animateMotion>
  <animateMotion 
    xlink:href="#worm1"
    dur="10s"
    begin="0.02; pause.end"
    fill="freeze"
    repeatCount="indefinite" 
    rotate="auto-reverse"
>
    <mpath xlink:href="#motionPath" />
  </animateMotion>
  <animateMotion 
    xlink:href="#worm2"
    dur="10s"
    begin="0.04; pause.end"
    fill="freeze"
    repeatCount="indefinite" 
    rotate="auto-reverse"
>
    <mpath xlink:href="#motionPath" />
  </animateMotion>
  <animateMotion 
    xlink:href="#worm3"
    dur="10s"
    begin="0.06; pause.end"
    fill="freeze"
    repeatCount="indefinite" 
    rotate="auto-reverse"
>
    <mpath xlink:href="#motionPath" />
  </animateMotion>
</svg>

0

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.