javascript - 多边形 onclick 事件问题及其形状

Question

我已经构建了一个正方形，周围有 4 个多边形(梯形形状)，我需要通过单击它来按顺序更改其颜色。

我在网络上找不到任何类似的问题。但我确实尝试在鼠标悬停时更改 zIndex ，但这不是一个好的解决方案。

您可以在这里查看问题 https://jsfiddle.net/d9Lh31sv/1/即使多边形 html 将其显示为一个矩形，并且它们的侧面彼此重叠，如您在此图像 中看到的那样

想知道是否有一种方法可以让点击事件仅遵守其多边形限制。提前致谢。

	var objTrapezium = document.getElementsByClassName('trapezium');	
	if (objTrapezium) {		
		for (var i = 0; i < objTrapezium.length; i++) {
			objTrapezium[i].onclick = function() {
				var _Color = this.firstChild.nextSibling.attributes.fill.value;	
				_Color = _Color=="none"  ? "grey" :  _Color =="grey" ? "red":  _Color =="red" ? "green": _Color =="green" ?"blue": _Color =="blue" ? "grey": "";							
				this.firstChild.nextSibling.attributes.fill.value = _Color;
        
			};

			objTrapezium[i].onmouseover = function() {
				this.style.zIndex = 9999;
				this.style.backgroundColor = "lightsteelblue";
			  }
			objTrapezium[i].onmouseout = function(){
				this.style.zIndex = 1;
				this.style.backgroundColor = "transparent";
			  }


		}

	}

.trapezium{
	position: relative;
}
.square{
  left: 202px;
  width: 73px;
  height: 73px;
  top: 102px;
}
.bottom{
  left: 53px;
  top: 175px;
  z-index: 1;
}
.left{
  transform: rotate(90deg);
  left: -243px;
  top: 102px;
}
.right{
  transform: rotate(-90deg);
  left: -315px;
  top: 101px;
}
.top{
 transform: rotate(-180deg);
 left: 129px;
 top: -48px;
}

<div>
  <svg class="trapezium square">
    <rect stroke="black" fill="none" width="73" height="73" />				
  </svg>
  <svg class="trapezium bottom" height="72" width="217">
    <polygon stroke="black" fill="none" points="0,72 72,0 144,0 216,72" />
  </svg>
  <svg class="trapezium left" height="72" width="217">
    <polygon stroke="black" fill="none" points="0,72 72,0 144,0 216,72" />
  </svg>
  <svg class="trapezium right" height="72" width="217">
    <polygon stroke="black" fill="none" points="0,72 72,0 144,0 216,72" />
  </svg>
  <svg class="trapezium top" height="72" width="217">
    <polygon stroke="black" fill="none" points="0,72 72,0 144,0 216,72" />
  </svg>
</div>

 

Answer 1

正如我所评论的，我会采取不同的做法:我会将所有内容放在一个 svg 元素中。请看一下。也许这就是您所需要的。

svg{border:1px solid; width:300px}
use{fill:white;}
use:hover{fill:gold}

 <svg viewBox="-115 -115 230 230">
    <defs>
      <polygon id="poly" stroke="black"  points="-36.5,36.5 36.5,36.5 108, 108 -108,108 -36.5,36.5" transform="translate(0,3)"  />
    </defs>

    <use xlink:href="#poly" />
    <use xlink:href="#poly" transform="rotate(90)" /> 
    <use xlink:href="#poly" transform="rotate(180)" />
    <use xlink:href="#poly" transform="rotate(270)" />
    
    <rect stroke="black" fill="none" x="-35" y="-35" width="70" height="70" />	
    
  </svg>