동일한 클래스 이름으로 개체 그룹에 함수를 적용하지만 서로 독립적으로 작동합니다.

내 목표는 단일 svg 다각형 위로 마우스를 가져 가서 해당 다각형이 사라지도록 (불투명도 0) 자바 스크립트 또는 j 쿼리로 밑에 무언가를 드러내도록하는 것입니다. 내 문제는 i 번째 다각형을 다른 다각형과 분리하여 해당 다각형 만 사라지게하는 방법을 모른다는 것입니다. 다각형이 많기 때문에 각각에 대해 새로운 기능을 만들고 싶지 않습니다. 결국 나는 다른 물체 (이미지)에도 같은 개념을 적용하고 싶습니다. 레이아웃은 특정 다각형 위로 마우스를 가져 가면 투명한 벌집 모양입니다.

"svgs [i] .style.opacity = '0';"의 i와 관련이 있다고 생각합니다. 그러나 나는 그것을 고치는 방법을 모르고 배열에서 i 번째 다각형을 호출하는 방법을 모르겠습니다. 감사!

#tester {
  position: relative;
  height: 70vh;
  background-color: #7e1d1d;
}

#tester img {
  height: 100%;
  width: 100%;
}

#tester .wrap svg {
  position: absolute;
  max-height: 100%;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.cls0 {
    display: inline-block;
    fill: #465761;
    stroke: #666;
    stroke-miterlimit: 10;
    stroke-width: 4px;
}

    <script type="text/javascript">
    function ghost() {
      var svgs = document.getElementsByClassName("cls0");
      var i;
      for (i = 0; i < svgs.length; i++) {
        svgs[i].style.opacity = '0';

      }
    }
    function normal() {
      var svgs = document.getElementsByClassName("cls0");
      var i;
      for (i = 0; i < svgs.length; i++) {
        svgs[i].style.opacity = "1";

      }
    }


  </script>

  <div id="tester">    
    <div class="wrap">
      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1216.21 504.62">    
        <title>Tester Polygon</title>
        <g id="Layer_2" data-name="Layer 2">
          <g id="Layer_1-2" data-name="Layer 1">

            <polygon class="cls0" onmouseover="ghost()" onmouseout="normal()"
              points="89 52.31 89 152.31 175.6 202.31 262.2 152.31 262.2 52.31 175.6 2.31 89 52.31" />

            <image class="testimg" width="225" height="225" transform="translate(138.6 65.31) scale(0.33 0.33)"xlink:href="img\1x\asset6.png" />


            <image class="star" width="225" height="225" transform="translate(138.6 65.31) scale(0.33 0.33)"xlink:href="img\1x\Asset24.png" />





            <polygon class="cls0" onmouseover="ghost()" onmouseout="normal()" points="262 52.31 262 152.31 348.6 202.31 435.2 152.31 435.2 52.31 348.6 2.31 262 52.31" />

            <image class="testimg"  width="225" height="225"transform="translate(311.6 64.31) scale(0.33 0.33)" xlink:href="img\1x\Asset7.png" />


            <image class="star" width="225" height="225" transform="translate(311.6 64.31) scale(0.33 0.33)" xlink:href="img\1x\Asset24.png" />



<polygon class="cls0" points="435 52.31 435 152.31 521.6 202.31 608.21 152.31 608.21 52.31 521.6 2.31 435 52.31" />

            <image class="testimg" width="225" height="225" transform="translate(484.6 65.31) scale(0.33 0.33)"xlink:href="img\1x\Asset8.png" />

            <image class="star" width="225" height="225" transform="translate(484.6 65.31) scale(0.33 0.33)"xlink:href="img\1x\Asset24.png" />

   </g>
        </g>
      </svg>
    </div>
  </div>