Проблема события полигона на клике с его формой

Question

Я построил квадрат, окружив его четырьмя многоугольниками (в форме трапеции). Мне нужно изменить его цвет в последовательности, щелкнув по нему.

Я не смог найти подобную проблему в Интернете.но я попытался изменить 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>
  

Answer 2

Решение, которое я мог бы предложить, - это использовать offsetX и offsetY на js, чтобы выяснить, находится ли щелчок вне диапазона трапеции, а затем использовать некоторую логику, чтобы изменить цвета в нужном элементе.

var objTrapezium = document.getElementsByClassName('trapezium');
if (objTrapezium) {
  for (var i = 0; i < objTrapezium.length; i++) {
    objTrapezium[i].onclick = function(e) {
      var id = this.attributes.id.value;
      var x = e.offsetX;
      var y = e.offsetY;
      var height = this.attributes.height.value;
      var outLeft = (y + x) < height;
      var outRight = (x - y) > (height * 2);
      var nextElemetId = "";
      var _Color = "";
      if ((id !== "square") && (outLeft || outRight)) {
        switch (id) {
          case "top":
            nextElemetId = outRight ? "left" : "right";
            break
          case "right":
            nextElemetId = outRight ? "top" : "bottom";
            break
          case "bottom":
            nextElemetId = outRight ? "right" : "left";
            break
          case "left":
            nextElemetId = outRight ? "bottom" : "top";
            break
        }
        var objNextTrapezium = document.getElementById(nextElemetId);
        _Color = objNextTrapezium.firstChild.nextSibling.attributes.fill.value;
        _Color = _Color == "none" ? "grey" : _Color == "grey" ? "red" : _Color == "red" ? "green" : _Color == "green" ? "blue" : _Color == "blue" ? "grey" : "none";
        objNextTrapezium.firstChild.nextSibling.attributes.fill.value = _Color;

      } else {
        _Color = this.firstChild.nextSibling.attributes.fill.value;
        _Color = _Color == "none" ? "grey" : _Color == "grey" ? "red" : _Color == "red" ? "green" : _Color == "green" ? "blue" : _Color == "blue" ? "grey" : "none";
        this.firstChild.nextSibling.attributes.fill.value = _Color;
      }
    };
  }
}

.trapezium {
	position: relative;
}

#square {
	left: 199px;
    width: 72px;
    height: 72px;
    top: 101px;
}

#top {
	transform: rotate(180deg);
	left: 51px;
	top: 29px;
}

#right {
	transform: rotate(270deg);
	left: -98px;
	top: 101px;
}

#bottom {
	left: 127px;
	top: 96px;	
}

#left {
	transform: rotate(90deg);
    left: -165px;
    top: 24px;
}

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