Как создать 2 отдельных SVG без блокировки других элементов div?

Question

У меня есть страница, которая разделена на 3 раздела. Верхняя панель с несколькими кнопками, большой средней частью и нижней панелью с большим количеством кнопок. И поверх всего нескольких плавающих окон, которые будут открываться и закрываться в зависимости от нажатых кнопок (это невозможно игнорировать).

Запрошенная структура - это средняя часть должна быть пустой div, которая загрузит несколько других страниц через jquery. Некоторые из этих страниц имеют интерактивные элементы, поэтому он должен принимать mouse events, несмотря на то, что div имеет самый низкий z-index всех элементов страницы.
Кнопки на верхнем и нижнем брусках должны быть все равно svg элементов, как из-за векторных свойств, так и из случайных нечетных форм. И они должны иметь более высокий z-index, чем средний div во все времена.

Моя проблема заключается в том, что svg покрывает средний div и блокирует все взаимодействия (в этом случае простое предупреждение при нажатии на div), хотя ни один из визуальных элементов не перекрывается.
Я пытался называть 2 разных svgs, по одному для каждого бара, но второй никогда не появляется. Я также попытался называть 2 svgs внутри основного svg и включить div внутри, но он тоже не работает.

Это пример того, как она в настоящее время выглядит (абсолютные позиции, Z-индексы и стили определены в CSS):

<div id="middleDiv" class="middleDiv" onClick="alert(1)">< /div> 

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> 

     <svg id="topBar" class="topBar" x="0" y="0"> 
      <rect id="btn_1" class="topBtn" x="0" y="0" height="30" width="100"/> 
      <rect id="btn_2" class="topBtn" x="100" y="0" height="30" width="100"/> 
     </svg> 

     <svg id="bottomBar" class="bottomBar" x="0" y="500"> 
      <rect id="btn_3" class="topBtn" x="0" y="0" height="30" width="100"/> 
      <rect id="btn_4" class="topBtn" x="100" y="0" height="30" width="100"/> 
     </svg> 
</svg> 

Это была первая попытка решения:

<div id="middleDiv" class="middleDiv" onClick="alert(1)">< /div> 

<svg id="topBar" class="topBar" x="0" y="0" xmlns="http://www.w3.org/2000/svg" version="1.1"> 
     <rect id="btn_1" class="topBtn" x="0" y="0" height="30" width="100"/> 
     <rect id="btn_2" class="topBtn" x="100" y="0" height="30" width="100"/> 
</svg> 

<svg id="bottomBar" class="bottomBar" x="0" y="500" xmlns="http://www.w3.org/2000/svg" version="1.1"> 
     <rect id="btn_1" class="topBtn" x="0" y="0" height="30" width="100"/> 
     <rect id="btn_2" class="topBtn" x="100" y="0" height="30" width="100"/> 
</svg> 

и это была вторая попытка решения:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> 

     <svg id="topBar" class="topBar" x="0" y="0"> 
      <rect id="btn_1" class="topBtn" x="0" y="0" height="30" width="100"/> 
      <rect id="btn_2" class="topBtn" x="100" y="0" height="30" width="100"/> 
     </svg> 

     <div id="middleDiv" class="middleDiv" onClick="alert(1)">< /div> 

     <svg id="bottomBar" class="bottomBar" x="0" y="500"> 
      <rect id="btn_3" class="topBtn" x="0" y="0" height="30" width="100"/> 
      <rect id="btn_4" class="topBtn" x="100" y="0" height="30" width="100"/> 
     </svg> 
</svg> 

Answer 1

Во-первых, вы должны указать ширину и высоту attri ноты для элементов <svg>. Если вы используете Chrome, он неправильно делает их размером страницы, если вы опускаете такие атрибуты, и это может быть вашей проблемой.

Если это не сработает, добавьте pointer-events = "none", чтобы предотвратить перемещение элементов <svg>.