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

334

20 декабря 2017, 20:15

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

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

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

Источник

Answer 1

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

<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>

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

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

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

<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>    , где

ᴑ - символ Юникода, латинской 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>