SVG Infinity Animate не работает должным образом

Я создал анимацию бесконечности SVG, но она работает не плавно, она застревает посередине, а затем перетекает. Установлены узлы в Illustrator в SVG, но после этого я столкнулся с той же проблемой. Кто-нибудь может просмотреть код и помочь мне, пожалуйста?

.svg-main {
    width: 700px;
    margin: 30px auto;
    position: relative;
}
svg#svga {
    position: absolute;
    top: 0;
    left: auto;
    bottom: auto;
    right: auto;
}

.sd1{fill:none;stroke:#000000; stroke-width:6;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.circ{fill:#000000; }
.st0{fill:#cccccc;}
.st1{fill:#cccccc;}
.st2{fill:none;stroke:#cccccc;stroke-width:6;stroke-miterlimit:10;}

<div class = "svg-main">
<svg version = "1.1" id = "svga" xmlns = "http://www.w3.org/2000/svg" xmlns:xlink = "http://www.w3.org/1999/xlink" x = "0px" y = "0px"
	 width = "300px" height = "200px" viewBox = "0 0 685 310" style = "enable-background:new 0 0 671.1 304.4;" xml:space = "preserve"
	>
<g class = "svg-col">
	<path class = "sd1" id = "loop-normal" d = "M343.6,156.5c11,15.9,104.6,147.2,181.9,147.6c0.1,0,0.8,0,1,0c82.1-0.3,148.6-67,148.6-149.2
	c0-82.4-66.8-149.2-149.2-149.2c-77.2,0-170.8,131-182.2,147.5c-0.8,1.1-1.6,2.3-2.1,3.1c-10.6,15.3-104.8,147.8-182.4,147.8
	C76.7,304.2,9.9,237.4,9.9,155S76.7,5.8,159.1,5.8c77.2,0,170.7,130.9,182.2,147.5C342.1,154.4,342.9,155.6,343.6,156.5z"/>
		<animate attributeName = "stroke-dasharray" attributeType = "XML"
		    	from = "1900, 1700"  to = "200 1700"
		    	begin = "0s" dur = "3s"
		    	repeatCount = "indefinite"/>
		<animate attributeName = "stroke-dashoffset" attributeType = "XML"
	    	from = "-1700"  to = "-3600"
	    	begin = "0s" dur = "3s"
	    	repeatCount = "indefinite"/>  
	</path>

	<circle id = "plug" class = "circ" cx = "0" cy = "0" r = "7"/> 
	<animateMotion
		xlink:href = "#plug"
	  	dur = "3s"
		rotate = "auto"
		repeatCount = "indefinite"
		calcMode = "linear"
		keyTimes = "0;1"    
		keySplines = "0.42, 0, 0.58, 1">
		<mpath xlink:href = "#loop-normal"/>
	</animateMotion> 
</g>	
</svg>
 
<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version = "1.1" id = "svg-bg" xmlns = "http://www.w3.org/2000/svg" xmlns:xlink = "http://www.w3.org/1999/xlink" x = "0px" y = "0px"
	 width = "300px" height = "200px" viewBox = "0 0 685 310" style = "enable-background:new 0 0 685 310;" xml:space = "preserve"> 
<path class = "st2" d = "M159.1,5.8C76.7,5.8,9.9,72.6,9.9,155s66.8,149.2,149.2,149.2S342.5,155,342.5,155S241.5,5.8,159.1,5.8z
	 M525.9,5.8C443.5,5.8,342.5,155,342.5,155s101,149.2,183.4,149.2S675.1,237.4,675.1,155S608.3,5.8,525.9,5.8z"/>
</svg>
</div>

Пожалуйста, опишите, как именно вы хотите переместить концы тире. Должна ли со временем меняться его длина? - В вашем <animateMotion> отсутствует атрибут keyPoints, и определение keySplines не имеет никакого эффекта, пока вы не установите calcMode = "spline".

— 06.07.2018 19:38

Спасибо @ccprog, я просто хочу, чтобы он не останавливался ни на секунду. Он должен продолжать вращаться, как и с левой стороны, но с правой стороны он на некоторое время останавливается, а затем снова продолжает вращаться. Мне нужно такое же вращение с правой стороны, чтобы хвост не останавливался при движении. Спасибо

— 10.07.2018 10:01

css animation svg css-animations svg-animate

06.07.2018 18:30

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

517

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Первое предварительное условие для плавного движения с анимацией stroke-dashoffset - это знать длину пути с соответствующей точностью:

document.querySelector('#loop-normal').getTotalLength() // approx. 1910

Оставьте анимацию stroke-dasharray. Вместо этого разделите общую длину пути статически на один штрих и один промежуток: stroke-dasharray = "200 1710". (Подойдет любая другая пропорция, если сумма равна 1910.)
В вашем <animateMotion> отсутствует атрибут keyPoints. Установите значение "0; 1"
Определение keySplines не имеет никакого эффекта, пока вы не установите calcMode = "spline". Оставьте это.

Остальное - небольшое упрощение: определите путь только один раз и разместите фон и анимацию в одном и том же SVG; назовите правильную длину пути в анимации stroke-dashoffset, чтобы обеспечить плавное движение; удалить неиспользуемый CSS.

.svg-main {
    width: 700px;
    margin: 30px auto;
    position: relative;
}
svg#svga {
    position: absolute;
    top: 0;
    left: auto;
    bottom: auto;
    right: auto;
}

.st2{fill:none;stroke:#cccccc;stroke-width:6;}
.sd1{fill:none;stroke:#000000; stroke-width:6;stroke-linecap:round;}
.circ{fill:#000000; }

<div class = "svg-main">
<svg id = "svga" xmlns = "http://www.w3.org/2000/svg" xmlns:xlink = "http://www.w3.org/1999/xlink"
	 width = "300px" height = "200px" viewBox = "0 0 685 310">
  <g class = "st2">
	<path id = "loop-normal" d = "M343.6,156.5c11,15.9,104.6,147.2,181.9,147.6c0.1,0,0.8,0,1,0c82.1-0.3,148.6-67,148.6-149.2
	c0-82.4-66.8-149.2-149.2-149.2c-77.2,0-170.8,131-182.2,147.5c-0.8,1.1-1.6,2.3-2.1,3.1c-10.6,15.3-104.8,147.8-182.4,147.8
	C76.7,304.2,9.9,237.4,9.9,155S76.7,5.8,159.1,5.8c77.2,0,170.7,130.9,182.2,147.5C342.1,154.4,342.9,155.6,343.6,156.5z"/>
  </g>
	<use class = "sd1" stroke-dasharray = "200 1710" xlink:href = "#loop-normal">
		<animate attributeName = "stroke-dashoffset"
	    	from = "200"  to = "-1710"
	    	begin = "0s" dur = "3s"
	    	repeatCount = "indefinite"/>  
	</use>

	<circle id = "plug" class = "circ" cx = "0" cy = "0" r = "7"/> 
	<animateMotion
		xlink:href = "#plug"
	  	dur = "3s"
		rotate = "auto"
		repeatCount = "indefinite"
		calcMode = "linear"
		keyTimes = "0;1"    
		keyPoints = "0;1">
		<mpath xlink:href = "#loop-normal"/>
	</animateMotion> 
</svg>
</div>

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

— 18.07.2018 15:50

Я хочу сделать дашаррай (хвост) прозрачным, как на этом скриншоте, пожалуйста, посмотрите, prnt.sc/k7ziu0 Если возможно, помогите мне. Еще раз спасибо.

— 18.07.2018 15:52

Это совсем другая проблема. Пожалуйста, задайте новый вопрос.

— 18.07.2018 17:47

Не могли бы вы ответить на это, пожалуйста? stackoverflow.com/questions/51417587/…

— 19.07.2018 10:53

10.07.2018 16:29