Помогите с dasharray и dashoffset

239

23 декабря 2017, 03:49

Никак не могу понять как правильно выставить stroke-dasharray и stroke-dashoffset. у меня результат на картинке сверху, снизу показано как нужно, и различия наложения( позиция чуть не та (нужно больше против часовой, и визуально нужно чуть больше оранжевого и меньше томатного цвета) никак не могу осознать что нужно вбить

<svg width="300" height="290">
  <rect fill="khaki" stroke="darkkhaki" width="10" height="70" x="145" y="220"></rect>
  <circle stroke="darkkhaki" r="100" cx="150" cy="125"   fill="gold"></circle>
  <circle r="50" cx="150" cy="125" fill="none" stroke-width="60" fill="none" stroke="tomato" ></circle>
  <circle r="50" cx="150" cy="125" fill="none" stroke-width="60" fill="none" stroke="darkorange" stroke-dasharray="30 35" stroke-dashoffset="30"></circle>
  <circle r="50" cx="150" cy="125" fill="gold" stroke-width="20" stroke="yellowgreen"></circle>
</svg>
svg {
  border: 1px solid #dddddd;
}

Answer 1

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

Посмотрите примеры c stroke-dasharray, совсем немного строчек кода:

Анимация бордюра из средней точки

Весь секрет действия в этой строчке:
attributeName="stroke-dasharray" from="0 152.2 0 152.2" to="0 0 304.4 0"

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
	<g> 
        <path id="shape" fill="none" stroke-width="6.3" stroke="#656E76" 
              d="M 38.8 3.35 H 3.15 V 43.65 H 155.75 V 3.35 H 120.2" /> 
	<animate xlink:href="#shape" attributeName="stroke-dasharray" from="0 152.2 0 152.2" to="0 0 304.4 0" begin="0s" dur="0.4s" /> 
	</g> 
</svg>

Трафарет лоудера с бегунком

Всё действие в этой строчке:

<animate attributeName="stroke-dashoffset" values="0;-78.5;-157;-235.5;-314;-392.5;-471;-549.5"

<svg width="50%" height="50%" viewBox="50 90 400 400"  > 
<circle cx="250" cy="250" r="100" style="stroke:black; fill:none; stroke-opacity:0.3; stroke-width:50; stroke-dasharray:70 8.5;" />  
 
<circle transform="rotate(-90 250 250)" cx="250" cy="250" r="100" style="stroke:dodgerblue; fill:none; stroke-opacity:0.4; stroke-width:50; 
 stroke-dasharray:70 558; stroke-dashoffset: 558" > 
 <animate attributeName="stroke-dashoffset" values="0;-78.5;-157;-235.5;-314;-392.5;-471;-549.5" dur="4s" repeatCount="indefinite" calcMode="discrete" fill="freeze" /> 
  </circle> 
  
			    
   </svg>

Это всё лирика, вернемся к практике.

Вопрос автора в итоге - разбивка окружности на равные сектора и расположение одного из секторов относительно вертикальной координаты.

На видимый конечный результат влияют четыре фактора:

Радиус окружности
stroke-dashoffset - сдвиг начала линии.
Чтобы исключить его влияние установим stroke-dashoffset="0"
Положение начальной точки, именно от неё будет рисоваться первый сектор прерывистой линии. Для окружности это положительная ось "Х".
Чтобы отсчет вести от вертикальной линии, повернем окружность против часовой стрелки на 90 градусов. transform=" rotate(-90 175 175)"
stroke-dasharray

Как всё же просчитать параметры Stroke-dasharray?

stroke-dasharray="30 35"

"30" - длина черточки, "35" длина пробела. При равенстве значений можно писать только одну цифру.

stroke-dasharray="30 35 30 5"

Две пары значений, как в примере с бордюром см. выше
В этом случае - Длина черты - длина пробела - длина черты - длина пробела

Подробнее здесь, здесь и здесь

Два сектора

Допустим нам надо разбить круг на два равных сектора.

Первый сектор займет черта, второй сектор - пробел.

Длина всей окружности при радиусе = 50px составит с=2 х 3.14 х 50 = 314 px.
Длина сектора = 157px или 180° stroke-dasharray="157 157"

<meta charset="utf-8"> 
<style> 
svg { 
  border: 1px solid #dddddd; 
} 
</style> 
<svg width="350" height="350" viewBox="0 0 350 350"> 
   <g>  
   <title>Развертка окружности в линию</title> 
	 <line x1="18" y1="50" x2="332" y2="50" stroke="tomato" stroke-width="20" />  
	 <line x1="18" y1="50" x2="332" y2="50" stroke="darkorange" stroke-width="20" stroke-dasharray="157 157" stroke-dashoffset="0"/>  
 </g>  
 
 <g> 
  <title>Ручка к мешени</title> 
     <rect fill="khaki" stroke="darkkhaki" width="70" height="10" x="255" y="170"></rect>  
 </g> 
  <g transform=" rotate(-90 175 175)"> 
 <title>Блок цветных кругов</title>  
   
  <circle stroke="darkkhaki" r="100" cx="175" cy="175"   fill="gold"></circle> 
 
  <circle r="50" cx="175" cy="175" fill="none" stroke-width="60" fill="none" stroke="tomato" ></circle> 
 
  <circle r="50" cx="175" cy="175" fill="none" stroke-width="60" fill="none" stroke="darkorange" stroke-dasharray="157 157" stroke-dashoffset="0"></circle> 
 
  <circle r="50" cx="175" cy="175" fill="gold" stroke-width="20" stroke="yellowgreen"></circle>  
    
</g>   
 
 <g fill="dodgerblue" stroke="none"> 
 <title> Начальная метка stroke-dashoffset </title> 
  
	<circle r="5" cx="175" cy="75" ></circle>  
	<circle r="5" cx="18" cy="35" </circle>  
</g> 
 
 <g>  
   <title>Поясняющий текст </title> 
  <text x="248" y="100" font-size="22">Circle / "2"  </text>  
  <text x="12" y="24" font-size="18">Line stroke-dasharray="157 157"  </text>  
   <text x="10" y="300" font-size="18">circle - "darkorange"  </text>   
    <text x="10" y="320" font-size="18">stroke-dasharray="157 157"  </text>   
     <text x="10" y="340" font-size="18"> stroke-dashoffset="0" </text>   
</g> 
 <g>  
   <title>Линии (grey) проходящие через центр полотна SVG</title> 
	<line x1="0%" y1="50%" x2="100%" y2="50%" stroke="grey" stroke-width="1" />  
	<line x1="50%" y1="0%" x2="50%" y2="100%" stroke="grey" stroke-width="1"/>  
</g> 
</svg>

Линия длиной 314px над кругом,- это развертка круга с длиной окружности -314px
Цветные точки - начальные точки рисования.

На окружности от начальной точки по часовой стрелке нарисовался первый сектор -
(черта stroke-dasharray) - оранжевого цвета и второй сектор томатного цвета это,- пробел stroke-dasharray

Вверху по линии от начальной точки, первый оранжевый сектор - черта, томатный отрезок - пробел.

Три сектора

Длина сектора = 314 / 3 = 104,7 или 120° stroke-dasharray="104.7 104.7"

<meta charset="utf-8"> 
<style> 
svg { 
  border: 1px solid #dddddd; 
} 
</style> 
<svg width="350" height="350" viewBox="0 0 350 350"> 
   <g>  
   <title>Развертка окружности в линию</title> 
	 <line x1="18" y1="50" x2="332" y2="50" stroke="tomato" stroke-width="30" />  
	 <line x1="18" y1="50" x2="332" y2="50" stroke="darkorange" stroke-width="30" stroke-dasharray="104.7 104.7" stroke-dashoffset="0"/>  
 </g>  
 
 <g> 
  <title>Ручка к мешени</title> 
     <rect fill="khaki" stroke="darkkhaki" width="70" height="10" x="255" y="170"></rect>  
 </g> 
  <g transform=" rotate(-90 175 175)"> 
 <title>Блок цветных кругов</title>  
   
  <circle stroke="darkkhaki" r="100" cx="175" cy="175"   fill="gold"></circle> 
 
  <circle r="50" cx="175" cy="175" fill="none" stroke-width="60" fill="none" stroke="tomato" ></circle> 
 
  <circle r="50" cx="175" cy="175" fill="none" stroke-width="60" fill="none" stroke="darkorange" stroke-dasharray="104.7 104.7" stroke-dashoffset="0"></circle> 
 
  <circle r="50" cx="175" cy="175" fill="gold" stroke-width="20" stroke="yellowgreen"></circle>  
    
</g>   
 
 <g fill="dodgerblue" stroke="none"> 
 <title> Начальная метка stroke-dashoffset </title> 
  
	<circle r="5" cx="175" cy="75" ></circle>  
	<circle r="5" cx="18" cy="35" </circle>  
</g> 
 
 <g>  
   <title>Поясняющий текст </title> 
  <text x="248" y="100" font-size="22">Circle / "3"  </text>  
  <text x="12" y="24" font-size="18">Line stroke-dasharray="104.7 104.7"  </text>  
   <text x="10" y="300" font-size="18">circle - "darkorange"  </text>   
    <text x="10" y="320" font-size="18">stroke-dasharray="104.7 104.7"  </text>   
     <text x="10" y="340" font-size="18"> stroke-dashoffset="0" </text>   
</g> 
 <g>  
   <title>Линии (grey) проходящие через центр полотна SVG</title> 
	<line x1="0%" y1="50%" x2="100%" y2="50%" stroke="grey" stroke-width="1" />  
	<line x1="50%" y1="0%" x2="50%" y2="100%" stroke="grey" stroke-width="1"/>  
</g> 
</svg>

Я не случайно добавил в примерах линию длиной равную длине окружности.

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

Четыре сектора

Длина сектора = 314 / 4 = 78,5 или 90° stroke-dasharray="104.7 104.7"

<meta charset="utf-8"> 
<style> 
svg { 
  border: 1px solid #dddddd; 
} 
</style> 
<svg width="350" height="350" viewBox="0 0 350 350"> 
   <g>  
   <title>Развертка окружности в линию</title> 
	 <line x1="18" y1="50" x2="332" y2="50" stroke="tomato" stroke-width="30" />  
	 <line x1="18" y1="50" x2="332" y2="50" stroke="darkorange" stroke-width="30" stroke-dasharray="78.5 78.5" stroke-dashoffset="0"/>  
 </g>  
 
 <g> 
  <title>Ручка к мешени</title> 
     <rect fill="khaki" stroke="darkkhaki" width="70" height="10" x="255" y="170"></rect>  
 </g> 
  <g transform=" rotate(-90 175 175)"> 
 <title>Блок цветных кругов</title>  
   
  <circle stroke="darkkhaki" r="100" cx="175" cy="175"   fill="gold"></circle> 
 
  <circle r="50" cx="175" cy="175" fill="none" stroke-width="60" fill="none" stroke="tomato" ></circle> 
 
  <circle r="50" cx="175" cy="175" fill="none" stroke-width="60" fill="none" stroke="darkorange" stroke-dasharray="78.5 78.5" stroke-dashoffset="0"></circle> 
 
  <circle r="50" cx="175" cy="175" fill="gold" stroke-width="20" stroke="yellowgreen"></circle>  
    
</g>   
 
 <g fill="dodgerblue" stroke="none"> 
 <title> Начальная метка stroke-dashoffset </title> 
  
	<circle r="5" cx="175" cy="75" ></circle>  
	<circle r="5" cx="18" cy="35" </circle>  
</g> 
 
 <g>  
   <title>Поясняющий текст </title> 
  <text x="248" y="100" font-size="22">Circle / "4"  </text>  
  <text x="12" y="24" font-size="18">Line stroke-dasharray="78.5 78.5"  </text>  
   <text x="10" y="300" font-size="18">circle - "darkorange"  </text>   
    <text x="10" y="320" font-size="18">stroke-dasharray="78.5 78.5"  </text>   
     <text x="10" y="340" font-size="18"> stroke-dashoffset="0" </text>   
</g> 
 <g>  
   <title>Линии (grey) проходящие через центр полотна SVG</title> 
	<line x1="0%" y1="50%" x2="100%" y2="50%" stroke="grey" stroke-width="1" />  
	<line x1="50%" y1="0%" x2="50%" y2="100%" stroke="grey" stroke-width="1"/>  
</g> 
</svg>

Здесь всё просто,- каждый сектор занял свою четверть окружности (90°) Две черты и два пробела stroke-dasharray

Шесть секторов

Длина сектора = 314 / 6 = 52,3 или 60° stroke-dasharray="52.3 52.3"

<meta charset="utf-8"> 
<style> 
svg { 
  border: 1px solid #dddddd; 
} 
</style> 
<svg width="350" height="350" viewBox="0 0 350 350"> 
   <g>  
   <title>Развертка окружности в линию</title> 
	 <line x1="18" y1="50" x2="332" y2="50" stroke="tomato" stroke-width="30" />  
	 <line x1="18" y1="50" x2="332" y2="50" stroke="darkorange" stroke-width="30" stroke-dasharray="52.3 52.3" stroke-dashoffset="0"/>  
 </g>  
 
 <g> 
  <title>Ручка к мешени</title> 
     <rect fill="khaki" stroke="darkkhaki" width="70" height="10" x="255" y="170"></rect>  
 </g> 
  <g transform=" rotate(-90 175 175)"> 
 <title>Блок цветных кругов</title>  
   
  <circle stroke="darkkhaki" r="100" cx="175" cy="175"   fill="gold"></circle> 
 
  <circle r="50" cx="175" cy="175" fill="none" stroke-width="60" fill="none" stroke="tomato" ></circle> 
 
  <circle r="50" cx="175" cy="175" fill="none" stroke-width="60" fill="none" stroke="darkorange" stroke-dasharray="52.3 52.3" stroke-dashoffset="0"></circle> 
 
  <circle r="50" cx="175" cy="175" fill="gold" stroke-width="20" stroke="yellowgreen"></circle>  
    
</g>   
 
 <g fill="dodgerblue" stroke="none"> 
 <title> Начальная метка stroke-dashoffset </title> 
  
	<circle r="5" cx="175" cy="75" ></circle>  
	<circle r="5" cx="18" cy="35" </circle>  
</g> 
 
 <g>  
   <title>Поясняющий текст </title> 
  <text x="248" y="100" font-size="22">Circle / "6"  </text>  
  <text x="12" y="24" font-size="18">Line stroke-dasharray="52.3 52.3"  </text>  
   <text x="10" y="300" font-size="18">circle - "darkorange"  </text>   
    <text x="10" y="320" font-size="18">stroke-dasharray="52.3 52.3"  </text>   
     <text x="10" y="340" font-size="18"> stroke-dashoffset="0" </text>   
</g> 
 <g>  
   <title>Линии (grey) проходящие через центр полотна SVG</title> 
	<line x1="0%" y1="50%" x2="100%" y2="50%" stroke="grey" stroke-width="1" />  
	<line x1="50%" y1="0%" x2="50%" y2="100%" stroke="grey" stroke-width="1"/>  
</g> 
</svg>

Начал проясняться алгоритм для секторов с равными промежутками,- Удваиваем количество закрашенных секторов, находим длину одного сектора и подставляем в stroke-dasharray

Проверяем на примере автора вопроса. Надо 5 закрашенных секторов итого вместе с равными промежутками нужно делить длину окружности на 10 частей.

10 секторов

Длина дуги сектора = 314 / 10 = 31,4 или 36° stroke-dasharray="31.4 31.4"

<meta charset="utf-8"> 
<style> 
svg { 
  border: 1px solid #dddddd; 
} 
</style> 
<svg width="350" height="350" viewBox="0 0 350 350"> 
   <g>  
   <title>Линии повторяющая расцветку  двух кругов</title> 
	 <line x1="18" y1="50" x2="332" y2="50" stroke="tomato" stroke-width="30" />  
	 <line x1="18" y1="50" x2="332" y2="50" stroke="darkorange" stroke-width="30" stroke-dasharray="31.4 31.4" stroke-dashoffset="0"/>  
 </g>  
 
 <g> 
  <title>Ручка к мешени</title> 
     <rect fill="khaki" stroke="darkkhaki" width="70" height="10" x="255" y="170"></rect>  
 </g> 
  <g transform=" rotate(-90 175 175)"> 
 <title>Блок цветных кругов</title>  
   
  <circle stroke="darkkhaki" r="100" cx="175" cy="175"   fill="gold"></circle> 
 
  <circle r="50" cx="175" cy="175" fill="none" stroke-width="60" fill="none" stroke="tomato" ></circle> 
 
  <circle r="50" cx="175" cy="175" fill="none" stroke-width="60" fill="none" stroke="darkorange" stroke-dasharray="31.4 31.4" stroke-dashoffset="0"></circle> 
 
  <circle r="50" cx="175" cy="175" fill="gold" stroke-width="20" stroke="yellowgreen"></circle>  
    
</g>   
 
 <g fill="dodgerblue" stroke="none"> 
 <title> Начальная метка stroke-dashoffset </title> 
  
	<circle r="5" cx="175" cy="75" ></circle>  
	<circle r="5" cx="18" cy="35" </circle>  
</g> 
 
 <g>  
   <title>Поясняющий текст </title> 
  <text x="248" y="100" font-size="22">Circle / "10"  </text>  
  <text x="12" y="24" font-size="18">Line stroke-dasharray="31.4 31.4"  </text>  
   <text x="10" y="300" font-size="18">circle - "darkorange"  </text>   
    <text x="10" y="320" font-size="18">stroke-dasharray="31.4 31.4"  </text>   
     <text x="10" y="340" font-size="18"> stroke-dashoffset="0" </text>   
</g> 
 <g>  
   <title>Линии (grey) проходящие через центр полотна SVG</title> 
	<line x1="0%" y1="50%" x2="100%" y2="50%" stroke="grey" stroke-width="1" />  
	<line x1="50%" y1="0%" x2="50%" y2="100%" stroke="grey" stroke-width="1"/>  
</g> 
</svg>

Теперь, когда мы владеем знаниями, как расчитать параметры stroke-dasharray, легко, с первого тыка "заточить под себя".

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

Можно сделать это двумя способами:

Повернуть на 108° градусов против часовой стрелки оранжевый круг.
Расчет:

В крайнем примере у нас уже повернуто на 90° градусов и доворачиваем до середины сектора ещё 18° градусов (весь сектор 36°)

итого: <g transform=" rotate(-108 175 175)">

Вариант с поворотом сектора

<meta charset="utf-8"> 
<style> 
svg { 
  border: 1px solid #dddddd; 
} 
</style> 
<svg width="350" height="350" viewBox="0 0 350 350"> 
  
 <g> 
  <title>Ручка к мишени</title> 
     <rect fill="khaki" stroke="darkkhaki" width="70" height="10" x="255" y="170"></rect>  
 </g> 
  <g transform=" rotate(-108 175 175)"> 
 <title>Блок цветных кругов</title>  
   
  <circle stroke="darkkhaki" r="100" cx="175" cy="175"   fill="gold"></circle> 
 
  <circle r="50" cx="175" cy="175" fill="none" stroke-width="60" fill="none" stroke="tomato" ></circle> 
 
  <circle r="50" cx="175" cy="175" fill="none" stroke-width="60" fill="none" stroke="darkorange" stroke-dasharray="31.4 31.4" stroke-dashoffset="0"></circle> 
 
  <circle r="50" cx="175" cy="175" fill="gold" stroke-width="20" stroke="yellowgreen"></circle>  
    
</g>   
 
 <g fill="dodgerblue" stroke="none"> 
 <title> Начальная метка stroke-dashoffset </title> 
  
	<circle r="5" cx="175" cy="75" ></circle>  
	</g> 
 
 <g>  
   <title>Поясняющий текст </title> 
  <text x="248" y="100" font-size="22">Circle / 10  </text>  
  <text x="9" y="24" font-size="18"> transform="rotate(-108 175 175)"  </text>  
   <text x="10" y="300" font-size="18">circle - "darkorange"  </text>   
    <text x="10" y="320" font-size="18">stroke-dasharray="31.4 31.4"  </text>   
     <text x="10" y="340" font-size="18"> stroke-dashoffset="0" </text>   
</g> 
 <g>  
   <title>Линии (grey) проходящие через центр полотна SVG</title> 
	<line x1="0%" y1="50%" x2="100%" y2="50%" stroke="grey" stroke-width="1" />  
	<line x1="50%" y1="0%" x2="50%" y2="100%" stroke="grey" stroke-width="1"/>  
</g> 
</svg>

Вариант с отступом

Во всех предыдущих примерах мы имели нулевой отступ и начало сектора совпадало с верт. линией. Теперь, чтобы сдвинуть сектор на половину его дуги = 31.4 / 2 = 15.7
Используем - stroke-dashoffset="15.7"

<meta charset="utf-8"> 
<style> 
svg { 
  border: 1px solid #dddddd; 
} 
</style> 
<svg width="350" height="350" viewBox="0 0 350 350"> 
  
 <g> 
  <title>Ручка к мишени</title> 
     <rect fill="khaki" stroke="darkkhaki" width="70" height="10" x="255" y="170"></rect>  
 </g> 
  <g transform=" rotate(-90 175 175)"> 
 <title>Блок цветных кругов</title>  
   
  <circle stroke="darkkhaki" r="100" cx="175" cy="175"   fill="gold"></circle> 
 
  <circle r="50" cx="175" cy="175" fill="none" stroke-width="60" fill="none" stroke="tomato" ></circle> 
 
  <circle r="50" cx="175" cy="175" fill="none" stroke-width="60" fill="none" stroke="darkorange" stroke-dasharray="31.4 31.4" stroke-dashoffset="15.7"></circle> 
 
  <circle r="50" cx="175" cy="175" fill="gold" stroke-width="20" stroke="yellowgreen"></circle>  
    
</g>   
 
 <g fill="dodgerblue" stroke="none"> 
 <title> Начальная метка stroke-dashoffset </title> 
  
	<circle r="5" cx="175" cy="75" ></circle>  
	</g> 
 
 <g>  
   <title>Поясняющий текст </title> 
  <text x="248" y="100" font-size="22">Circle / 10  </text>  
  <text x="9" y="24" font-size="18"> stroke-dashoffset="15.7"  </text>  
   <text x="10" y="300" font-size="18">circle - "darkorange"  </text>   
    <text x="10" y="320" font-size="18">stroke-dasharray="31.4 31.4"  </text>   
     <text x="10" y="340" font-size="18"> stroke-dashoffset="15.7" </text>   
</g> 
 <g>  
   <title>Линии (grey) проходящие через центр полотна SVG</title> 
	<line x1="0%" y1="50%" x2="100%" y2="50%" stroke="grey" stroke-width="1" />  
	<line x1="50%" y1="0%" x2="50%" y2="100%" stroke="grey" stroke-width="1"/>  
</g> 
</svg>

Решение вопроса автора

stroke-dasharray="31.4 31.4" и stroke-dashoffset="31.4"

Вот если бы я сразу дал такой ответ, что вам нужно вбить? Это помогла бы? Да, но один раз, и следующая подобная задача вызвала бы без знания теории точно такие же мучения, как были с первым примером. Не поленитесь, прочитайте пожалуйста "много буков" выше.

<style> 
svg { 
  border: 1px solid #dddddd; 
} 
</style> 
<svg width="300" height="290"> 
 
  <rect fill="khaki" stroke="darkkhaki" width="10" height="70" x="145" y="220"></rect> 
 
  <circle stroke="darkkhaki" r="100" cx="150" cy="125"   fill="gold"></circle> 
 
  <circle r="50" cx="150" cy="125" fill="none" stroke-width="60" fill="none" stroke="tomato" ></circle> 
 
  <circle r="50" cx="150" cy="125" fill="none" stroke-width="60" fill="none" stroke="darkorange" stroke-dasharray="31.4 31.4" stroke-dashoffset="0"></circle> 
 
  <circle r="50" cx="150" cy="125" fill="gold" stroke-width="20" stroke="yellowgreen"></circle> 
 
</svg>

Answer 2

Хотелось ещё добавить информации по анимации, вдруг кому-нибудь она будет полезна и подвигнет сделать на основе примеров, что-то своё.*

Вращение по часовой стрелке

В пример "10 секторов" из первого ответа добавлена всего одна команда, реализующая вращение по часовой стрелке:

<animate attributeName="stroke-dashoffset" values="314;0" dur="4s" repeatCount="indefinite" />

Ниже полный код:

<meta charset="utf-8"> 
<style> 
svg { 
  border: 1px solid #dddddd; 
} 
</style> 
<svg width="350" height="350" viewBox="0 0 350 350"> 
   <g>  
   <title>Линии повторяющая расцветку  двух кругов</title> 
	 <line x1="18" y1="50" x2="332" y2="50" stroke="tomato" stroke-width="30" />  
	 <line x1="18" y1="50" x2="332" y2="50" stroke="darkorange" stroke-width="30" stroke-dasharray="31.4 31.4" stroke-dashoffset="0"> 
     <animate attributeName="stroke-dashoffset" values="314;0" dur="4s" repeatCount="indefinite" /> 
	 </line>	  
 </g>  
 
  
  <g transform=" rotate(-90 175 175)"> 
 <title>Блок цветных кругов</title>  
   
  <circle stroke="darkkhaki" r="100" cx="175" cy="175"   fill="gold"></circle> 
 
  <circle r="50" cx="175" cy="175" fill="none" stroke-width="60" fill="none" stroke="tomato" ></circle> 
 
  <circle r="50" cx="175" cy="175" fill="none" stroke-width="60" fill="none" stroke="darkorange" stroke-dasharray="31.4 31.4" stroke-dashoffset="0"> 
  <animate attributeName="stroke-dashoffset" values="314;0" dur="4s" repeatCount="indefinite" /> 
  </circle> 
 
  <circle r="50" cx="175" cy="175" fill="gold" stroke-width="20" stroke="yellowgreen"></circle>  
    
</g>   
 
 <g fill="dodgerblue" stroke="none"> 
 <title> Начальная метка stroke-dashoffset </title> 
  
	<circle r="5" cx="175" cy="75" ></circle>  
	<circle r="5" cx="18" cy="35" </circle>  
</g> 
 
  
 <g>  
   <title>Линии (grey) проходящие через центр полотна SVG</title> 
	<line x1="0%" y1="50%" x2="100%" y2="50%" stroke="grey" stroke-width="1" />  
	<line x1="50%" y1="0%" x2="50%" y2="100%" stroke="grey" stroke-width="1"/>  
</g> 
</svg>

Вращение против часовой стрелки

     <animate attributeName="stroke-dashoffset" values="0;314" dur="4s"  
 repeatCount="indefinite" />

Обратите внимание, сравнивая с первым примером анимации,- в атрибуте анимации "values" параметры 314;0 поменялись местами.

<meta charset="utf-8"> 
<style> 
svg { 
  border: 1px solid #dddddd; 
} 
</style> 
<svg width="350" height="350" viewBox="0 0 350 350"> 
   <g>  
   <title>Линии повторяющая расцветку  двух кругов</title> 
	 <line x1="18" y1="50" x2="332" y2="50" stroke="tomato" stroke-width="30" />  
	 <line x1="18" y1="50" x2="332" y2="50" stroke="darkorange" stroke-width="30" stroke-dasharray="31.4 31.4" stroke-dashoffset="0"> 
     <animate attributeName="stroke-dashoffset" values="0;314" dur="4s" repeatCount="indefinite" /> 
	 </line>	  
 </g>  
 
  
  <g transform=" rotate(-90 175 175)"> 
 <title>Блок цветных кругов</title>  
   
  <circle stroke="darkkhaki" r="100" cx="175" cy="175"   fill="gold"></circle> 
 
  <circle r="50" cx="175" cy="175" fill="none" stroke-width="60" fill="none" stroke="tomato" ></circle> 
 
  <circle r="50" cx="175" cy="175" fill="none" stroke-width="60" fill="none" stroke="darkorange" stroke-dasharray="31.4 31.4" stroke-dashoffset="0"> 
  <animate attributeName="stroke-dashoffset" values="0;314" dur="4s" repeatCount="indefinite" /> 
  </circle> 
 
  <circle r="50" cx="175" cy="175" fill="gold" stroke-width="20" stroke="yellowgreen"></circle>  
    
</g>   
 
 <g fill="dodgerblue" stroke="none"> 
 <title> Начальная метка stroke-dashoffset </title> 
  
	<circle r="5" cx="175" cy="75" ></circle>  
	<circle r="5" cx="18" cy="35" </circle>  
</g> 
 
  
 <g>  
   <title>Линии (grey) проходящие через центр полотна SVG</title> 
	<line x1="0%" y1="50%" x2="100%" y2="50%" stroke="grey" stroke-width="1" />  
	<line x1="50%" y1="0%" x2="50%" y2="100%" stroke="grey" stroke-width="1"/>  
</g> 
</svg>

Вращение в обе стороны с паузой

Пауза достигается повторением начальных и конечных значений stroke-dashoffset

В этой строчке весь привод анимации:

<animate attributeName="stroke-dashoffset" values="314;0;0;314;314" dur="10s" repeatCount="indefinite" />

<meta charset="utf-8"> 
<style> 
svg { 
  border: 1px solid #dddddd; 
} 
</style> 
<svg width="350" height="350" viewBox="0 0 350 350"> 
   <g>  
   <title>Линии повторяющая расцветку  двух кругов</title> 
	 <line x1="18" y1="50" x2="332" y2="50" stroke="tomato" stroke-width="30" />  
	 <line x1="18" y1="50" x2="332" y2="50" stroke="darkorange" stroke-width="30" stroke-dasharray="31.4 31.4" stroke-dashoffset="0"> 
     <animate attributeName="stroke-dashoffset" values="314;0;0;314;314" dur="10s" repeatCount="indefinite" /> 
	 </line>	  
 </g>  
 
  
  <g transform=" rotate(-90 175 175)"> 
 <title>Блок цветных кругов</title>  
   
  <circle stroke="teal" r="100" cx="175" cy="175"   opacity="0.5" fill="teal"></circle> 
  <circle r="50" cx="175" cy="175" fill="gold" stroke-width="20" stroke="yellowgreen"></circle>  
 
  <circle r="50" cx="175" cy="175" fill="none" stroke-width="60" fill="none" stroke="tomato" ></circle> 
 
  <circle r="50" cx="175" cy="175" fill="none" stroke-width="60" fill="none" stroke="darkorange" stroke-dasharray="31.4 31.4" stroke-dashoffset="0"> 
  <animate attributeName="stroke-dashoffset" values="314;0;0;314;314" dur="10s" repeatCount="indefinite" /> 
  </circle> 
 
   
    
</g>   
 
 <g fill="dodgerblue" stroke="none"> 
 <title> Начальная метка stroke-dashoffset </title> 
  
	<circle r="5" cx="175" cy="75" ></circle>  
	<circle r="5" cx="18" cy="35" </circle>  
</g> 
 
  
 <g>  
   <title>Линии (grey) проходящие через центр полотна SVG</title> 
	<line x1="0%" y1="50%" x2="100%" y2="50%" stroke="grey" stroke-width="1" />  
	<line x1="50%" y1="0%" x2="50%" y2="100%" stroke="grey" stroke-width="1"/>  
</g> 
</svg>