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

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

0 голосов
/ 23 октября 2018

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

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

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

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

Редактировать 2: кажется, что работает нормально, когда я добавляю «px» после атрибутов «top» и «left»,Теперь у меня проблема в том, чтобы держать изображение в правильном положении при изменении размера 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>

Ответы [ 2 ]

0 голосов
/ 23 октября 2018

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

top: 100;
left: 100;

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

Добавив px, вы получите: 

top: 100px;
left: 100px;

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

0 голосов
/ 23 октября 2018

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

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

Примечания от W3Schools

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

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

...