javascript - 在 svg 图像上的相对位置显示元素

Question

在我的 HTML 中，有一个 SVG 图像，据说代表一个篮球场。这个想法是点击任何地方来记录得分和失误。

球场看起来不错，我设法捕捉到了点击及其位置。我没有做的是在给定位置显示上下文菜单和得分/丢失的图像。菜单和结果图像显示在页面底部。

我想这完全是 CSS 和在 SVG 顶部显示这 2 个元素的问题，你能帮我这样做吗？

这是我到目前为止的想法: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

听起来您的代码在将“px”添加到top 和left 后可以正常工作。由于您使用的是 .style.left 和 .style.top，因此您正在访问 CSS 属性，这意味着如果您使用的是硬像素值，您'将需要在 px 中指定您想要它们。没有 px 你会得到类似的东西:

top: 100;
left: 100;

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

通过添加 px，您现在将拥有:

top: 100px;
left: 100px;

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