Как отрисовать кривую линию при hover?

Question

[appcent]

при наведении на плитку идет линия с изгибом до определенного места на машине. Нужно сверстать с учетом адаптивности. Подскажите каким образом в принципе подобное реализовывается? Сталкиваюсь впервые...

Answer 1

[VoidVolker]

https://www.w3schools.com/graphics/svg_line.asp

<svg height="210" width="500">
  <line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" />
</svg>

Answer 2

[profesor08]

Да как хочешь реализовывай. Стандартов нет. Есть только база знаний, которую надо применять. Программно определи точку A и точку B. Подсчитай расстояние между ними и сделай картинку линии такой ширины и как-то расположи имея координаты. При изменении размеров окна можешь пересчитать позицию.

Comments

[Ingernirated]

Да, реализуется легко, ты реально две точки возьми и после к третей, делов на 5 минут.
Тебя ничто не ограничивает в выборе инструментов, делай, как удобней тебе уже будет.
Это же CCS3 там всё возможно, просто выбери один из стилей выполнения данной задачи и всё.

[Алексей Ярков]

Ingernirated, чувствую иронию

[Сергей Выволокин]

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

[profesor08]

Ingernirated, ты походу запулил свой коммент не в тему. Перечитай внимательно мой комментарий, а потом перечитай свою чушь и удали.

[appcent]

Основная проблема как раз таки в координатах А(начало) и В(конец), не понятно относительно чего их искать... в мыслях крутится метод offset(), но мне кажется это не то.

[VoidVolker]

А чего их искать-то? Первая координата — середина ребра, обращенного к центру изображения, вторая точка привязана к изображению.

[appcent]

VoidVolker, а как вторая может быть привязана к изображению?
ЗЫ: изображение авто - это фон

[VoidVolker]

Ну так изображение состоит из w*h пикселей и у каждого элемента и пикселя изображения есть свои координаты в виде [x, y].

[appcent]

VoidVolker,
ни че не понял, как ты точке скажешь быть на одном конкретном месте, даже зная wh браузера и самой точки?

[profesor08]

appcent, если css то left, right или transform: translate. У svg - x, y или тот-же transform. Тут ты уперся в базу, которую ты не знаешь, тебе ничего не остается, кроме как разбираться в позиционировании элементов на странице, в их свойствах, в параметрах.

Answer 3

[Павел]

По сути, как я это вижу, если нужна адаптиновать и везде чтобы было одинаково, то для ПК верстаете как обычно. для смартфонов выводите только машину с точками, при нажатии на точку выводится всплывающее окно, иного варианта тут врятле видно