9

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

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

Ожидаемый результат - что-то вроде этого: введите сюда описание изображения

Источник

1

1 ответ 1

11

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

<animateMotion  dur="4s" repeatCount="2">
                        <mpath xlink:href="#pathChain"/>
                </animateMotion>            

Пример кода:

<svg width="600" height="400" viewBox="80 100 400 300">

<defs>
 <circle id="CirclePath" r="5" fill="red" />
</defs>
  <path id="pathChain" d="M100,200 C100,100 250,100 250,200 S 400,300 400,200" stroke="grey" fill="none"/>
 
<use  xlink:href="#CirclePath">
                <animateMotion
                  dur="4s"
                  repeatCount="indefinite">
                        <mpath xlink:href="#pathChain"/>
                </animateMotion>
                
        </use> 
</svg>

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

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

<svg width="590" height="560" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
  <defs>
  <path id="MyPath" d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="black" fill="transparent"/>
  </defs>
  
    <text font-family="Verdana" font-size="10" textLength="400" lengthAdjust="spacing">
    <textPath xlink:href="#MyPath">
      O-O-O-O-O-O-O-O-O-O-O-O-O-O-O-O-O-O-O-O-O-O-O-O-O-O-O-O-O-O-O-O-O-O-O-O-O-O-O-O-O-O-O-O-O-O-O-O-O-O-O-O-O-O-O-O-O-O-O-O-O-O-O-O-O-O-O-O-
    </textPath>
  </text>
</svg> 

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

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

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

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

<svg width="600" height="400" viewBox="80 100 400 300">
 <path id="pathChain" d="M100,200 C100,100 250,100 250,200 S 400,300 400,200" stroke="grey" fill="none"/>


<text font-size="36"  font-family="Times New Roman" fill="grey" >
<textPath id="result"    xlink:href="#pathChain">
<tspan dx="0" > &#7441; </tspan> <tspan dx="-15">   &#45; </tspan><tspan dx="-15"> &#7441;</tspan><tspan dx="-15">   &#45;</tspan><tspan dx="-15">   &#7441; </tspan><tspan dx="-15">   &#45; </tspan><tspan dx="-15"> &#7441;</tspan><tspan dx="-15">   &#45;</tspan><tspan dx="-15">   &#7441; </tspan><tspan dx="-15">   &#45; </tspan><tspan dx="-15"> &#7441;</tspan><tspan dx="-15">   &#45;</tspan><tspan dx="-15">   &#7441; </tspan><tspan dx="-15">   &#45; </tspan><tspan dx="-15"> &#7441;</tspan><tspan dx="-15">   &#45;</tspan><tspan dx="-15">   &#7441; </tspan><tspan dx="-15">   &#45; </tspan><tspan dx="-15"> &#7441;</tspan><tspan dx="-15">   &#45;</tspan><tspan dx="-15">   &#7441; </tspan>

</textPath>
</text>				
			
</svg>    

<tspan dx="-15"> &#7441;</tspan>    , где 

&#7441; - символ Юникода, латинской O на боку.

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

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

<svg width="600" height="400" viewBox="100 100 400 300">

 <path id="pathChain" d="M100,200 C100,100 250,100 250,200 S 400,300 400,200" stroke="grey" fill="none"/>

<text font-size="36"  font-family="Times New Roman" fill="grey" >
<textPath id="result"    xlink:href="#pathChain">
<tspan dx="0" > &#7441; </tspan> <tspan dx="-15">   &#45; </tspan><tspan dx="-15"> &#7441;</tspan><tspan dx="-15">   &#45;</tspan><tspan dx="-15">   &#7441; </tspan><tspan dx="-15">   &#45; </tspan><tspan dx="-15"> &#7441;</tspan><tspan dx="-15">   &#45;</tspan><tspan dx="-15">   &#7441; </tspan><tspan dx="-15">   &#45; </tspan><tspan dx="-15"> &#7441;</tspan><tspan dx="-15">   &#45;</tspan><tspan dx="-15">   &#7441; </tspan><tspan dx="-15">   &#45; </tspan><tspan dx="-15"> &#7441;</tspan><tspan dx="-15">   &#45;</tspan><tspan dx="-15">   &#7441; </tspan><tspan dx="-15">   &#45; </tspan><tspan dx="-15"> &#7441;</tspan><tspan dx="-15">   &#45;</tspan><tspan dx="-15">   &#7441; </tspan>
<animate  dur="10s" repeatCount="indefinite" attributeName="startOffset" values="1%;55%;1%"/> 
</textPath>
</text>				
			
</svg>   

Update 16.12.2018 г.

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

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

Продолжительность всей анимации <animate dur="12s" делится поровну на количество позиций в values
Поэтому одна часть анимации будет 2s, если позиции повторяются подряд 55%;55%,- будет пауза в этом месте.

<svg width="600" height="400" viewBox="100 100 400 300">

 <path id="pathChain" d="M100,200 C100,100 250,100 250,200 S 400,300 400,200" stroke="grey" fill="none"/>

<text font-size="36"  font-family="Times New Roman" fill="grey" >
<textPath id="result"    xlink:href="#pathChain">
<tspan dx="0" > &#7441; </tspan> <tspan dx="-15">   &#45; </tspan><tspan dx="-15"> &#7441;</tspan><tspan dx="-15">   &#45;</tspan><tspan dx="-15">   &#7441; </tspan><tspan dx="-15">   &#45; </tspan><tspan dx="-15"> &#7441;</tspan><tspan dx="-15">   &#45;</tspan><tspan dx="-15">   &#7441; </tspan><tspan dx="-15">   &#45; </tspan><tspan dx="-15"> &#7441;</tspan><tspan dx="-15">   &#45;</tspan><tspan dx="-15">   &#7441; </tspan><tspan dx="-15">   &#45; </tspan><tspan dx="-15"> &#7441;</tspan><tspan dx="-15">   &#45;</tspan><tspan dx="-15">   &#7441; </tspan><tspan dx="-15">   &#45; </tspan><tspan dx="-15"> &#7441;</tspan><tspan dx="-15">   &#45;</tspan><tspan dx="-15">   &#7441; </tspan>
<animate  dur="12s" repeatCount="indefinite" attributeName="startOffset" values="1%;37%;55%;55%;1%;1%"/> 
</textPath>
</text>				
			
</svg>   

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

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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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