Как создать pattern или path цепи вдоль линии

#css #css3 #svg

Мне необходимо создать  pattern цепи расположенный вдоль линии .
Я попытался создать markers в форме звена цепи, но возникли проблемы с  ориентацией
маркеров вдоль path.     

Есть ли альтернативный способ сделать это?
Если да, то каким должен быть мой подход?     

Ожидаемый результат - что-то вроде этого:   

Источник
    

Ответы

Ответ 1

Вдоль криволинейного пути можно направлять любое изображение с помощью команды:   


                        
                            


Пример кода:








Но вдоль пути будет двигаться только один предмет, то есть одно звено цепи.  Чтобы
разместить несколько десятков звеньев цепи, нужно будет десятки раз повторить эту команду
и нет способов, как оптимизировать код. Плюс неизбежно появятся трудности с позиционированием
и склейкой соседних звеньев.      

Для размещения   текста вдоль криволинейного пути, в SVG существует другая команда
-   



 


   

В примере выше использована идея из ответа Enso @Michael Mullany

Но цепочка выглядит совсем не так, как хотелось.     

А если заменить буквы на символы Юникода, которые более реалистично имитируют звенья
цепи?    

Я остановился на варианте использования символа Юникода - "Латинская маленькая буква
на боку" - U+1D11 ᴑ и знак дефиса для соединения соседних звеньев цепи - -    



    


   

 ᴑ    , где 


ᴑ - символ Юникода, латинской O на боку. 

dx="-15" - смещение этого символа влево.        

В дополнении пример анимации     



   


  

Update 16.12.2018 г.

Пример движения с паузами в начале и конце траектории при замедлении в центре.      

Такой алгоритм достигается повторением цифр в начале и конце атрибута 
анимации values="1%;37%;55%;55%;1%;1%"   

Продолжительность всей анимации   

 



 ᴑ     - 
ᴑ   -   ᴑ    -  ᴑ   -   ᴑ    -  ᴑ   -   ᴑ    -
 ᴑ   -
  ᴑ    -  ᴑ   -   ᴑ 
 

				
			
   




Источник ответа: How can I draw a pattern along a stroke or a path in svg? @Alexandr_TT

Связанный топик - Использование символов Юникода в анимации