Задать вопрос
@maitre
html

Пунктирная линия делается с помощью SVG?

В PSD макете нарисованы пунктирные линии от одного шага к другому, и так между разными шагами. Мне нужно сверстать эту композицию. Я нашел способ сделать это через SVG примерно так:
<svg width="100" height="100">
     <circle r="1" cx="70" cy="50" fill="black" stroke-width="5" />
     <circle r="1" cx="70" cy="54" fill="black" stroke-width="5" />
     <circle r="1" cx="70" cy="58" fill="black" stroke-width="5" />
     <circle r="1" cx="70" cy="62" fill="black" stroke-width="5" />
</svg>


Я правильно делаю или есть какой-то другой правильный способ?
Или еще один вопрос, есть карта страны (просто вырезанный по контуру однотонный фон, без подключения настоящих карт и т.п.) и на ней точки городов, при наведении на которые показывается окошко с дополнительной информацией. Сначала думал это какие-то JS плагины, поискал - ничего нету. Думаю делать это тоже через SVG точки-круги на карте. Тоже хочу спросить, это правильно или есть другие способы?
  • Вопрос задан
  • 1680 просмотров
1 комментарий
Подписаться 2 Средний 1 комментарий
Пригласить эксперта
Ответы на вопрос 3
politon
@politon
HTML5,CSS3,JS,PHP,SQL,API,canvas,animation...
Возможно более правильное решение будет border:dashed 2px red;
https://jsfiddle.net/Politonius/7gfwgsa9/8/
Ответ написан
Комментировать
Комментировать
longclaps
@longclaps
Резвись, редактируй:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="100" height="100">
     <circle r="1" cx="70" cy="50" fill="black" stroke-width="5" />
     <circle r="1" cx="70" cy="54" fill="black" stroke-width="5" />
     <circle r="1" cx="70" cy="58" fill="black" stroke-width="5" />
     <circle r="1" cx="70" cy="62" fill="black" stroke-width="5" />
     <path d="m 30,30 0,40" style="fill:none;fill-rule:evenodd;stroke:#000000;
     stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;
     stroke-miterlimit:4;stroke-dasharray:3,3;stroke-dashoffset:0" />
</svg>
Ответ написан
Комментировать
Комментировать
@dm1vr
Вам поможет свойство stroke-dasharray

https://codepen.io/dmlvr/pen/BaOjggZ

<svg>
  <line x1="60" y1="50" x2="180" y2="50" style="stroke-dasharray: 10 5; stroke: black; stroke-width: 4px;" />
</svg>
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Тестировщик-стажёр
ITooLabs • Тула
от 35 000 до 40 000 ₽
Fullstack PHP Developer
Smapse Education
от 40 000 до 65 000 ₽
Trainee - IT Support
move2usajobs.com LLC • Лос-Анджелес
от 2 000 до 4 000 $
Ещё вакансии
Заказы с Хабр Фриланса
Перенести сайт с tilda
26 апр. 2024, в 13:31
3000 руб./за проект
Консультация веб-дизайнера по созданию сайта в конструкторе
26 апр. 2024, в 13:24
1500 руб./в час
Прием WebRTC через Socket io в unity c#
26 апр. 2024, в 13:12
2000 руб./за проект
Ещё заказы