1

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

Интересует, как правильно создать такую навигацию?
Это нужно просто вырезать из psd линию в виде точек, сохранить в формате png, а потом сверху расположить кружки в виде ссылок, и спозиционировать ссылки абсолютно?
Подскажите, как правильно сделать это, желательно решение адаптивное.
Или это нужно делать с помощью svg?

1
  • 3
    На адаптиве можно будет убрать линии и выстроить меню в ряд по несколько штук. А так да, либо свг, либо пнг.
    – DaemonHK
    19 июн 2018 в 7:22

1 ответ 1

3

Чёрные круги кликабельны ...можете проверить, иконок не было и потому они просто чёрные ..собственно так это делается

https://jsfiddle.net/v0of2cj8/ здесь можно проверить кликабельность

<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 542.55688 87.708679"><style>.s0{fill:#000;}</style><g transform="translate(341.37139,-124.88531)"><path d="m-340.93452 176.80357c43.57241-21.16166 94.58049 7.06298 129.28747-14.17257 37.50011-22.94453 97.89256-41.66788 144.554379-11.19519 53.523356 34.95363 155.871501 90.75382 165.431792 39.37454 7.642669-41.0735 80.210929-29.02063 101.988259-65.41154" style="fill:none;stroke-dasharray:2.00000006, 6.00000017;stroke-width:2;stroke:#f70000"/><a xlink:role="button" target="_blank" xlink:href="http://google.com"><ellipse cx="-207.13095" cy="160.92857" rx="16.630953" ry="17.386904" class="s0"/></a><a xlink:role="button" target="_blank" xlink:href="http://yandex.ru"><ellipse ry="17.386904" rx="16.630953" cy="167.73215" cx="-41.577374" class="s0"/></a><a xlink:role="button" target="_blank" xlink:href="http://rambler.ru"><ellipse cx="96.005966" cy="194.94643" rx="16.630953" ry="17.386904" class="s0"/></a></g></svg>

2
  • можете рассказать, как вы это сделали? это генератор есть какой-то? 19 июн 2018 в 16:32
  • inkscape я в нём рисовал
    – user33274
    19 июн 2018 в 16:33

Ваш ответ

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

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