0

Имеется интерактивная карта 1000px на 1000px. Имеется база данных в которой постоянно обновляются эти зоны в виде их крайних 4 точек и передаются в пикселях. Пример зоны:

Первая точка top:100px; left:100px;
Вторая точка top:-100px; left:-100px;
Третья точка top:200px; left:200px;
Четвертая точка top:-200px; left:-200px;

Получаем что-то вроде такого (извините что криво):

введите сюда описание изображения

Собственно сам вопрос - как можно соединить в квадрат с заливкой эти точки? (через CSS, HTML)

Значения для точки 1 top и left задаются через тег {zone1_top} {zone1_left} Для второй {zone2_top} {zone2_left} и так далее

Вот пример как выводится одна точка зоны (один ее край):

<div style="position:absolute; top:{zone1_top}px; left:{zone1_left}; background-color: red; width:16px; height:16px;"></div>

Как это будет выглядеть: введите сюда описание изображения

Жду помощи!

6
  • пожалуй только свг, если выделенная область всегда квадрат, то можно и css
    – kizoso
    31 окт 2017 в 18:43
  • @kizoso, у тя был подобный вопрос?
    – Air
    31 окт 2017 в 19:03
  • @Air, да но это наверное не совсем то - Как сделать соединительную линию под наклоном между двумя точками?, если нужен квадрат например, а если нет то вариантов не много
    – kizoso
    31 окт 2017 в 19:15
  • @kizoso, ты свой вопрос решила?
    – Air
    31 окт 2017 в 19:16
  • @Air, на широких - как в примере, на адаптив разбила на блоки получилось просто по порядку определения, хотелось простого css решения, это оказалось самым простым
    – kizoso
    31 окт 2017 в 19:18

1 ответ 1

0

Если у вас происходит вставка координат из базы прямо в HTML, то, думаю, вам подойдет решение на SVG:

<svg width="200" height="200">
  <path d="M 20,20 L80,20 L80,80 L20,80 z" fill="#000" />
</svg>

В вашем случае это будет так:

<svg width="200" height="200">
  <path d="M {zone1_left},{zone1_top} L{zone2_left},{zone2_top} L{zone3_left},{zone3_top} L{zone4_left},{zone4_top} z" fill="#000" />
</svg>
2
  • благодарю, отличное решение 5 ноя 2017 в 19:09
  • Не стесняйтесь отметить ответ принятым ) 5 ноя 2017 в 23:24

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

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