Question

在我的HTML中，有一个SVG图片，据说是代表篮球场的。这个想法是在任何地方单击以记录得分和错过的镜头。

法院看起来不错，我设法获得了点击及其位置。我没有做的是在给定位置显示上下文菜单和计分/遗漏的图像。菜单和结果图像显示在页面底部。

我想这全都是CSS的问题，在SVG上显示这两个元素，您能帮我吗？

到目前为止，我想出的是：https://codepen.io/anon/pen/KGGwpJ

编辑2：当我在“ top”和“ left”属性之后添加“ 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>

Answer 1

在top和left中添加'px'之后，听起来您的代码正在工作。由于您使用的是.style.left和.style.top，因此您要访问CSS属性，这意味着如果您使用的是硬像素值，则需要在{{ 1}}。如果没有px，您将拥有类似以下内容：

px

浏览器不知道该如何解释。

通过添加top: 100; left: 100;，您现在将拥有：

px

让我知道您是否还有其他问题：）

Answer 2

您可以使用z-index并将上，右，下，左结合position属性使用来对齐菜单：

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

来自W3Schools

的笔记

z-index属性指定元素的堆叠顺序。
具有较高堆叠顺序的元素始终位于具有较低堆叠顺序的元素之前。
z-index仅适用于定位的元素（position：absolute，position：relative或position：fixed）。

如果您还有其他问题，请告诉我。

在SVG图像上的相对位置显示元素

2 个答案: