Нашел нужную схему мест, но она на svg. Не особо разбираюсь в нем. Как добавить функцию выбора места в схеме?

Question

[hakimi1]

Comments

[Вадим]

Вот тут есть все ответы: https://freelance.habr.com/

[Модератор]

На вопрос «как сделать» отвечает документация и поиск в интернет.

Тут отвечают на вопросы «почему я сделал, как в документации, а оно не работает. Поискал в интернет, вот запросы, в ответах не нашел. Что я делаю не так?»

Покажите, как вы пробовали решить проблему, приведите код попытки (пусть неудачной), опишите, как запускали, что ожидали и что получилось.
За готовыми решениями - на фриланс. В текущем виде это не вопрос, а задание. Нарушен п.5.12 Регламента.

[Максим]

В этом случае ни как, в прошлом вопросе не было такой задачи и я бы с первого раза сделаь бы как требуется а вот выбор места вы добавили на лету

[Максим]

Эту схему можно сделать на обычном html, css без вертяков всяких

[hakimi1]

Максим, на html у меня есть схема с кликом, но она ужасна. Эта хоть похожа на вагон

Answer 1

[Максим]

Хорошо, давайте по шагам
Я не много модернезировал эту схему, напишу сразу, что отлавливать click по rect внутри use очень проблематично



В данный момент, вам нужно приложить усилия и попробовать увеличить количество g.section со всем содержимым внутри ... то есть смотрите открывающий тег и закрывающий с class.section + добавить (самостоятельно ) transform="translateX()" где нужно отодвинуть одну секцию от предыдущей

<g class="section" style="transform: translateX(20px)">
    <g>
      <rect x="0" y="6"/>
      <rect x="0" y="120"/>
      <rect x="120" y="6"/>
      <rect x="120" y="120"/>
    </g>
    <g>
      <rect  x="0" y="294"/>
      <rect  x="120" y="294"/>
    </g>
  </g>

сразу после него идёт use - продублируйте это таким образом что бы получить нужное количество секций -- это будет ваша попытка решить эту задачу и потом вернёмся к вопросу о click и получению места и всей доп информации

Comments

[hakimi1]

Спасибо огромное!

[hakimi1]

Максим , Я попробовал по простому, но это фигня какая-то :D