Показать элемент на изображении SVG в относительной позиции

Question

Показать элемент на изображении SVG в относительной позиции

1

В моем HTML есть изображение SVG, которое якобы представляет собой баскетбольную площадку. Идея состоит в том, чтобы щелкнуть в любом месте, чтобы записать забитые и пропущенные выстрелы.

Суд выглядит хорошо, мне удалось захватить клик и его позиции. То, что я не могу сделать, - отобразить контекстное меню и забитое/пропущенное изображение в данной позиции. Меню и изображение результата отображаются в нижней части страницы.

Я предполагаю, что все это связано с CSS и отображением этих двух элементов поверх SVG, не могли бы вы мне помочь?

Вот что я придумал до сих пор: https://codepen.io/anon/pen/KGGwpJ

Редактирование 2: кажется, что он отлично работает, когда я добавляю "px" после "верхнего" и "левого" атрибутов. Проблема, которую я сейчас имею, заключается в том, чтобы сохранить изображение в правильном положении, когда svg изменен размер... или не изменить размер svg.

Изменение: добавление кода в сообщение

var pos_x = 0;
var pos_y = 0;

function shot_taken(zone, x, y) {
  pos_x = x;
  pos_y = y;
  document.getElementById('context_menu').style.left = pos_x;
  document.getElementById('context_menu').style.top = pos_y;
  alert(x + " " + y);
  document.getElementById('context_menu').style.display = 'block';
}

function add_shot(is_scored) {
  if (is_scored) {
    document.getElementById('scored').style.left = (pos_x - 16);
    document.getElementById('scored').style.top = (pos_y - 16);
    document.getElementById('missed').style.display = 'none';
    document.getElementById('scored').style.display = 'block';
  } else {
    document.getElementById('missed').style.left = (pos_x - 15);
    document.getElementById('missed').style.top = (pos_y - 15);
    document.getElementById('scored').style.display = 'none';
    document.getElementById('missed').style.display = 'block';
  }
  hide_submenu();
}

function hide_submenu() {
  document.getElementById('context_menu').style.display = 'none';
  hide_menu = true;
}

* {
  padding: 0;
  margin: 0;
}

body {
  background: #2B2B2B;
}

.court {
  fill: #7A7A7A;
  stroke: #2B2B2B;
  stroke-width: 4;
  stroke-miterlimit: 10;
}

.zone {
  fill: #7A7A7A;
  stroke: #2B2B2B;
  stroke-width: 4;
  stroke-miterlimit: 10;
}

.zone:hover {
  fill: #FEA400;
  cursor: pointer;
}

.shot_on_court {
  z-index: 99;
  position: absolute;
  display: none;
  width: 32px;
  height: 32px;
}

.court_container {
  position: relative;
}

.onclick_menu {
  position: absolute;
  z-index: 10;
  width: 150px;
  color: #fff;
  padding: 4px;
  border: none;
  cursor: pointer;
  font-family: 'lucida sans unicode', sans-serif;
  font-size: 1em;
}

.onclick_menu {
  position: absolute;
  display: none;
}

.onclick_menu>ul.onclick_menu_content {
  z-index: 10;
  width: 150px;
  margin: 0;
  padding: 10px;
  list-style: none;
  background: #fff;
  color: #333;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  -moz-box-shadow: 0 0 4px #999;
  -webkit-box-shadow: 0 0 4px #999;
  box-shadow: 0 0 4px #999
}

.onclick_menu>ul.onclick_menu_content li {
  padding: 8px;
  border-bottom: solid 1px #ccc;
}

.onclick_menu>ul.onclick_menu_content li:hover {
  background: #EC6603;
  color: #fff;
}

.onclick_menu>ul.onclick_menu_content li:last-child {
  border: none
}

<div class="court_container">
  <svg id="basketball" x="0px" y="0px" viewBox="0 0 1280 871">
    	<script>
    	function clicked(zone, evt){
    		var e = evt.target;
    		var dim = e.getBoundingClientRect();
    		var x = evt.clientX /*- dim.left*/;
    		var y = evt.clientY /*- dim.top*/;
    		shot_taken(zone, x, y);
    	}
    	</script>
    
    	<rect x="25" y="31" class="court" width="1228" height="771"></rect>
    	<rect x="25" y="31" class="zone" width="180" height="426" onclick="clicked('zone1',evt);"/>
    	<rect x="1073" y="31" class="zone" width="180" height="426" onclick="clicked('zone1',evt);"/>
    	<rect x="205" y="31" class="zone" width="234" height="250" onclick="clicked('zone1',evt);"/>
    	<rect x="839" y="31" class="zone" width="234" height="250" onclick="clicked('zone1',evt);"/>
    	<rect x="439" y="31" class="zone" width="200" height="250" onclick="clicked('zone1',evt);"/>
    	<rect x="439" y="281" class="zone" width="200" height="250" onclick="clicked('zone1',evt);"/>
    	<path class="zone" d="M439,687.6v114.5h400v-115c-61,28.4-128.9,44.3-200.5,44.3C567.3,731.5,499.7,715.8,439,687.6z" onclick="clicked('zone1',evt);"/>
    	<path class="zone" d="M439,531v156.6c60.7,27.8,128.3,43.4,199.5,43.4c71.6,0,139.5-15.7,200.5-43.8V531H439z" onclick="clicked('zone1',evt);"/>
    	<path class="zone" d="M205,457h0.1c0-0.1-0.1-0.2-0.1-0.3V457z" onclick="clicked('zone1',evt);"/>
    	<path class="zone" d="M205,281v175.7c0,0.1,0.1,0.2,0.1,0.3C253.5,558.7,336.5,640.7,439,687.6V531v-74V281H205z" onclick="clicked('zone1',evt);"/>
    	<path class="zone" d="M1073,457v-2.4c-0.4,0.8-0.8,1.6-1.2,2.4H1073z" onclick="clicked('zone1',evt);"/>
    	<path class="zone" d="M839,281v176v74v156.2c102-47,184.7-128.8,232.8-230.2c0.4-0.8,0.8-1.6,1.2-2.4V281H839z" onclick="clicked('zone1',evt);"/>
    	<rect x="639" y="281" class="zone" width="200" height="250" onclick="clicked('zone1',evt);"/>
    	<rect x="639" y="31" class="zone" width="200" height="250" onclick="clicked('zone1',evt);"/>
    </svg>

  <img class="shot_on_court" src="https://cdn4.iconfinder.com/data/icons/lingo/Stop.png" id="missed">
  <img class="shot_on_court" src="https://cdn3.iconfinder.com/data/icons/fatcow/32/accept.png" id="scored">
  <div tabindex="0" id="context_menu" class="onclick_menu">
    <ul class="onclick_menu_content">
      <li onclick="add_shot(true)">Scored</li>
      <li onclick="add_shot(false)">Missed</li>
      <li onclick="hide_submenu()">Cancel</li>
    </ul>
  </div>
</div>

Nicolas 23 окт. 2018, в 17:29

Источник

0

Кажется, что мой код был в порядке, за исключением того, что я пропустил «px» после атрибутов «top» и «left». Кто-нибудь знает, почему я должен их написать?
Nicolas 23 окт. 2018, в 17:32

Теги:

javascript

css

svg

position

2 ответа

0

Вы можете использовать z-index и использовать верхний, правый, нижний, левый в сочетании с свойством position для выравнивания вашего меню:

.onclick_menu {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
}

Заметки из W3Schools

Свойство z-index указывает порядок стека элемента.
Элемент с большим порядком стека всегда находится перед элементом с более низким порядком стека.
z-index работает только с позиционированными элементами (позиция: абсолютная, позиция: относительная или позиция: фиксированная).

Дайте мне знать, если у вас возникнут дополнительные вопросы.

Lars Schuitema 23 окт. 2018, в 14:45

0

Спасибо за ваш ответ, но я не понимаю, что отличается от того, что я уже делаю. Z-индекс установлен. Позиция абсолютная. Верхний и левый атрибуты устанавливаются с помощью javascript в зависимости от того, где произошел щелчок.
Nicolas 23 окт. 2018, в 17:18

Ещё вопросы

Кажется, что мой код был в порядке, за исключением того, что я пропустил «px» после атрибутов «top» и «left». Кто-нибудь знает, почему я должен их написать?
Спасибо за ваш ответ, но я не понимаю, что отличается от того, что я уже делаю. Z-индекс установлен. Позиция абсолютная. Верхний и левый атрибуты устанавливаются с помощью javascript в зависимости от того, где произошел щелчок.

kcvan · Accepted Answer · 2018-10-23T17-04-00.000Z

Похоже, что ваш код работает после добавления "точка" к top и left. Поскольку вы используете .style.left и .style.top, вы .style.top доступ к свойствам CSS, а это означает, что если вы используете значение жесткого пикселя, вам нужно указать, что вы хотите их в px. Без px вас есть что-то вроде:

top: 100;
left: 100;

которые браузер не знает, как интерпретировать.

Добавив px вы теперь будете иметь:

top: 100px;
left: 100px;

Позвольте мне знать, если у вас есть еще вопросы :)