Страницы

Поиск по вопросам

понедельник, 22 октября 2018 г.

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

Мне необходимо создать pattern цепи расположенный вдоль линии . Я попытался создать markers в форме звена цепи, но возникли проблемы с ориентацией маркеров вдоль path.
Есть ли альтернативный способ сделать это? Если да, то каким должен быть мой подход?
Ожидаемый результат - что-то вроде этого:
Источник


Ответ

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

Пример кода:

Но вдоль пути будет двигаться только один предмет, то есть одно звено цепи. Чтобы разместить несколько десятков звеньев цепи, нужно будет десятки раз повторить эту команду и нет способов, как оптимизировать код. Плюс неизбежно появятся трудности с позиционированием и склейкой соседних звеньев.
Для размещения текста вдоль криволинейного пути, в SVG существует другая команда -
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-
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
Связанный топик - Использование символов Юникода в анимации

Комментариев нет:

Отправить комментарий