Мне необходимо создать pattern цепи расположенный вдоль линии .
Я попытался создать markers в форме звена цепи, но возникли проблемы с ориентацией маркеров вдоль path.
Есть ли альтернативный способ сделать это?
Если да, то каким должен быть мой подход?
Ожидаемый результат - что-то вроде этого:
Источник
Ответ
Вдоль криволинейного пути можно направлять любое изображение с помощью команды:
Пример кода:
Но вдоль пути будет двигаться только один предмет, то есть одно звено цепи. Чтобы разместить несколько десятков звеньев цепи, нужно будет десятки раз повторить эту команду и нет способов, как оптимизировать код. Плюс неизбежно появятся трудности с позиционированием и склейкой соседних звеньев.
Для размещения текста вдоль криволинейного пути, в SVG существует другая команда -
Update
В примере выше использована идея из ответа Enso @Michael Mullany
Но цепочка выглядит совсем не так, как хотелось.
А если заменить буквы на символы Юникодов, которые более реалистично имитируют звенья цепи?
Я остановился на варианте использования символа Юникода - "Латинская маленькая буква на боку" - U+1D11 ᴑ и знак дефиса для соединения соседних звеньев цепи - -
ᴑ - символ Юникода, латинской O на боку.
dx="-15" - смещение этого символа влево.
В дополнении пример анимации
Источник ответа: How can I draw a pattern along a stroke or a path in svg? @Alexandr_T
Связанный топик - Использование символов Юникода в анимации
Комментариев нет:
Отправить комментарий