Интерактивные пробелы под каждым SVG

Question

Под каждым SVG есть пробелы, которые можно щелкнуть.

Это означает, что при нажатии этой области ничего не происходит, видео не открывается.

Вся область внутри поля должна быть доступна для нажатия.

Код: https://jsfiddle.net/fzLcpjrb/

Кроме того, почему при наведении курсора мыши на эту область появляются 2 разных курсора мыши?

Как все это можно исправить ?

Что неправильно написано в html, если проблема именно в этом?

const load = (function makeLoad() {
   "use strict";

   function _load(tag) {
      return function (url) {
         return new Promise(function (resolve) {
            const element = document.createElement(tag);
            const parent = "body";
            const attr = "src";
            element.onload = function () {
               resolve(url);
            };
            element[attr] = url;
            document[parent].appendChild(element);
         });
      };
   }
   return {
      js: _load("script")
   };
}());

const videoPlayer = (function makeVideoPlayer() {
   "use strict";
   const players = [];
   let playerVars = {};

   function onPlayerReady(event) {
      const player = event.target;
      player.setVolume(100); // percent
   }

   let hasShuffled = false;

   function onPlayerStateChange(event) {
      const player = event.target;
      if (!hasShuffled) {
         player.setShuffle(true);
         player.playVideoAt(0);
         hasShuffled = true;
      }
      if (event.data === YT.PlayerState.PLAYING) {
         for (let i = 0; i < players.length; i++) {
            if (players[i] !== event.target) players[i].pauseVideo();
         }
      }

      if (playerVars.loop && event.data === YT.PlayerState.ENDED) {
         player.seekTo(playerVars.start);
      }
   }

   function addVideo(video, settings) {
      playerVars = Object.assign({
         videoId: video.dataset.id,
         host: "https://www.youtube-nocookie.com",
         events: {
            "onReady": onPlayerReady,
            "onStateChange": onPlayerStateChange
         }
      }, settings);
      players.push(new YT.Player(video, playerVars));
   }

   function init(video, settings) {
      load.js("https://www.youtube.com/player_api").then(function () {
         YT.ready(function () {
            addVideo(video, settings);
         });
      });
   }
   return {
      init
   };
}());

function loadPlayer(opts) {
   "use strict";

   function show(el) {
      el.classList.remove("hide");
   }

   function initPlayer(wrapper) {
      const video = wrapper.querySelector(".video");
      opts.width = opts.width || 198;
      opts.height = opts.height || 198;
      opts.autoplay = 1;
      opts.controls = 1;
      opts.rel = 0;
      opts.enablejsapi = 1;
      opts.iv_load_policy = 3;
      opts.fs = 0;
      opts.disablekb = 1;

      function paramInOpts(settings, param) {
         if (opts[param] !== undefined) {
            settings[param] = opts[param];
         }
         return settings;
      }
      const settingsParams = ["width", "height", "videoid", "host"];
      const settings = settingsParams.reduce(paramInOpts, {});
      const playerVarsParams = ["autoplay", "cc_load_policy",
         "controls", "disablekb", "end", "fs", "iv_load_policy",
         "list", "listType", "loop", "playlist", "rel", "start"
      ];
      settings.playerVars = playerVarsParams.reduce(paramInOpts, {});
      videoPlayer.init(video, settings);
   }

   function coverClickHandler(evt) {
      const wrapper = evt.currentTarget.nextElementSibling;
      show(wrapper);
      initPlayer(wrapper);
   }
   const cover = document.querySelector(opts.target);
   cover.addEventListener("click", coverClickHandler);
}
const playlist = "0dgNc5S8cLI,mnfmQe8Mv1g,-Xgi_way56U,CHahce95B1g";


loadPlayer({
   target: ".alpha",
   start: 0,
   end: 280,
   loop: true
});
loadPlayer({
   target: ".beta",
   start: 0,
   end: 240,
   loop: true
});
loadPlayer({
   target: ".gamma",
   start: 0,
   end: 265,
   loop: true
});
loadPlayer({
   target: ".delta",
   start: 4,
   end: 254,
   loop: true
});
loadPlayer({
   target: ".epsilon",
   start: 0,
   end: 242,
   loop: true
});
loadPlayer({
   target: ".zeta",
   start: 0,
   end: 285,
   loop: true
});
loadPlayer({
   target: ".eta",
   start: 23,
   end: 312,
   loop: true
});
loadPlayer({
   target: ".theta",
   start: 2
});
loadPlayer({
   target: ".iota"
});

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  background: #353198;
}

.outer {
  display: table;
  height: 100%;
  margin: 0 auto;
}

.tcell {
  display: table-cell;
  vertical-align: middle;
}

svg {
  border: solid;
}

.container-left {
  float: left;
  width: 606px;
  margin: 0;
}

.container-left .wraph {
  position: relative;
  width: 606px;
  margin: 45px 0 0 0;
  overflow: hidden;
  border-radius: 25px;
  border: 3px solid #0059dd;
  box-sizing: border-box;
  background-position: 0 -600px;
  background-size: 100% 200%;
}

.container-left .wraph .nav {
  margin: 0;
  padding: 0;
  list-style: none;
}

.container-left .wraph .nav li {
  margin: 0;
  padding: 0;
  float: left;
}

.container-left .wraph .nav li {
  float: left;
  width: 198px;
  height: 198px;
  margin: 0 0 3px 0;
  background: rgba(0, 0, 0, 0.2);
}

.container-left .wraph .nav li:nth-of-type(3n+2) {
  margin: 0 3px 0 3px;
}

.container-left .wraph .nav li:nth-of-type(n+7) {
  margin-bottom: 0;
}

.container-left .wraph .nav li svg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  cursor: pointer;
  fill: blue;
}




.container-left .wraph .linesa::before,
.container-left .wraph .linesa::after {
  content: "";
  position: absolute;
  top: 0;
  left: 198px;
  width: 3px;
  height: 100%;
  background: #0059dd;
}

.container-left .wraph .linesa::after {
  left: 399px;
}

.container-left .wraph .linesb::before,
.container-left .wraph .linesb::after {
  content: "";
  position: absolute;
  top: 198px;
  left: 0;
  width: 100%;
  height: 3px;
  background: #0059dd;
}

.container-left .wraph .linesb::after {
  top: 399px;
}

.container-left .wraph .nav li iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 198px;
  height: 198px;
  cursor: pointer;
}

.container-left .wraph .nav li .alpha,
.playinga {
  margin: 0;
}

.container-left .wraph .nav li .beta,
.playingb {
  margin: 0 201px 0;
}

.container-left .wraph .nav li .gamma,
.playingc {
  margin: 0 402px 0;
}

.container-left .wraph .nav li .delta,
.playingd {
  margin: 201px 0 0;
}

.container-left .wraph .nav li .epsilon,
.playinge {
  margin: 201px 201px 0;
}

.container-left .wraph .nav li .zeta,
.playingf {
  margin: 201px 402px 0;
}

.container-left .wraph .nav li .eta,
.playingg {
  margin: 402px 0 0;
}

.container-left .wraph .nav li .theta,
.playingh {
  margin: 402px 201px 0;
}

.container-left .wraph .nav li .iota,
.playingi {
  margin: 402px 402px 0;
}


a:focus {
  outline: 0;
}

.hide {
  display: none;
}

<div class="outer">
   <div class="tcell">
      <div class="container-left">
         <div class=" wraph">
            <ul class="nav">
               <li>
                  <svg width="198" height="198" viewbox="8.5 -12.2 7 48.49">
                     <symbol id="play" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
                        <title>Play</title>
                        <path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z" />
                        <path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z" />
                     </symbol>
                  </svg>
                  <svg class="alpha" >
                     <use href="#play" />
                  </svg>
                  <div class="hide">
                     <div class="video playinga" data-id="ZPz3wzPlruA"></div>
                  </div>
               </li>
               <li>
                  <svg class="beta">
                     <use href="#play" />
                  </svg>
                  <div class="hide">
                     <div class="video playingb" data-id="VFMtNOxpV3o"></div>
                  </div>
               </li>
               <li>
                  <svg class="gamma">
                     <use href="#play" />
                  </svg>
                  <div class="hide">
                     <div class="video playingc" data-id="Zkf4EDjV1_g"></div>
                  </div>
               </li>
               <li>
                  <svg class="delta">
                     <use href="#play" />
                  </svg>
                  <div class="hide">
                     <div class="video playingd" data-id="-Xgi_way56U"></div>
                  </div>
               </li>
               <li>
                  <svg class="epsilon">
                     <use href="#play" />
                  </svg>
                  <div class="hide">
                     <div class="video playinge" data-id="EK3h0IADYrQ"></div>
                  </div>
               </li>
               <li>
                  <svg class="zeta">
                     <use href="#play" />
                  </svg>
                  <div class="hide">
                     <div class="video playingf" data-id="YOw9J4K02H4"></div>
                  </div>
               </li>
               <li>
                  <svg class="eta">
                     <use href="#play" />
                  </svg>
                  <div class="hide">
                     <div class="video playingg" data-id="ID856YDIb6A"></div>
                  </div>
               </li>
               <li>
                  <svg class="theta">
                     <use href="#play" />
                  </svg>
                  <div class="hide">
                     <div class="video playingh" data-id="9Gn8ymkrlbI"></div>
                  </div>
               </li>
               <li>
                  <svg class="iota">
                     <use href="#play" />
                  </svg>
                  <div class="hide">
                     <div class="video playingi" data-id="qYEooPeyz5M"></div>
                  </div>
               </li>
            </ul>
            <div class="linesa"></div>
            <div class="linesb"></div>
         </div>
      </div>
   </div>
</div>

Answer 1

Ваши элементы <li> имеют фиксированный размер 198 пикселей на 198 пикселей, но ваши элементы <svg> имеют другой размер. Используя инспектор, вы можете увидеть это несоответствие размеров:
If I give all svg's inside the nav class that same size, then they do match up properly

.nav svg {
  width: 198px;
  height: 198px;
}