Как сверстать штрих-пунктирную «змейку»?

Question

[Игорь]

Как сверстать штрих-пунктирную «змейку»? И такие кресты? Ну, и знак вопроса?

Comments

[Александр]

насчет крестов ещё ладно, но знак вопроса должен быть исключительно картинкой, если вы не хотите заработать пачку проблем на одно место.

Answer 1

[Максим]

В общем давайте, тоже сами учитесь ещё, между defs расположен крестик (#cross) для копирования используем use и пишите так <use href="#cross" x="" y=""> а дальше x и y это координаты и расталкиваете куда надо до желаемого результата - если что то не получится пишите

знак вопроса вставить лучше всё таки картинкой: svg image и дальше как обычно x="" y="" width height

пунктирная линия получается в svg : stroke-dasharray

Comments

[Игорь]

А при адаптиве получается это все нужно перерисовывать?

[Максим]

Игорь, нет - просто удалите в css -width и height для тега svg

Answer 2

[Денис Инешин]

1. Рисуем на canvas
2. https://developer.mozilla.org/en-US/docs/Web/API/C...