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

Question

[maitre]

В 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 точки-круги на карте. Тоже хочу спросить, это правильно или есть другие способы?

Comments

[Сергей Соколов]

SVG линию можно сделать пунктирной.

Answer 1

[Олег]

Возможно более правильное решение будет border:dashed 2px red;
https://jsfiddle.net/Politonius/7gfwgsa9/8/

Answer 2

[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>

Answer 3

[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>