[BUG] Multi Level Zone not Working

[bloodf]

If I use a multi level zone, like 3 levels down, the plugins gets crazy and don't know what to do.

Here is my Index.html that you can reproduce (Using the demo)

`

<svg version="1.1" baseProfile="basic" id="x" 
xmlns="http://www.w3.org/2000/svg" 
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="600px" height="600px" viewBox="0 0 600 600" xml:space="preserve">
<g board="true">
  <rect stage="true" id="Stage" x="86" y="533" style="fill:#001553;" width="429" height="53"/>
  <g seating-area="seat-back-b" zoom-target="seat-back-b" id="Seats_Back_B">
    <circle seat="1" style="fill:#C9F5FF;" cx="339.5" cy="81.5" r="25.5"/>
    <circle seat="2" style="fill:#C9F5FF;" cx="407.8" cy="81.5" r="25.5"/>
    <circle seat="3" style="fill:#C9F5FF;" cx="476.2" cy="81.5" r="25.5"/>
    <circle seat="4" style="fill:#C9F5FF;" cx="544.5" cy="81.5" r="25.5"/>
    <circle seat="5" style="fill:#C9F5FF;" cx="339.5" cy="150" r="25.5"/>
    <circle seat="6" style="fill:#C9F5FF;" cx="407.8" cy="150" r="25.5"/>
    <circle seat="7" style="fill:#C9F5FF;" cx="476.2" cy="150" r="25.5"/>
    <circle seat="8" style="fill:#C9F5FF;" cx="544.5" cy="150" r="25.5"/>
    <circle seat="9" style="fill:#C9F5FF;" cx="339.5" cy="218.5" r="25.5"/>
    <circle seat="10" style="fill:#C9F5FF;" cx="407.8" cy="218.5" r="25.5"/>
    <circle seat="11" style="fill:#C9F5FF;" cx="476.2" cy="218.5" r="25.5"/>
    <circle seat="12" style="fill:#C9F5FF;" cx="544.5" cy="218.5" r="25.5"/>
  </g>
  <g seating-area="seat-back-a" zoom-target="seat-back-a" id="Seats_Back_A">
    <circle seat="13" style="fill:#C9F5FF;" cx="57.5" cy="81.5" r="25.5"/>
    <circle seat="14" style="fill:#C9F5FF;" cx="125.8" cy="81.5" r="25.5"/>
    <circle seat="15" style="fill:#C9F5FF;" cx="194.2" cy="81.5" r="25.5"/>
    <circle seat="16" style="fill:#C9F5FF;" cx="262.5" cy="81.5" r="25.5"/>
    <circle seat="17" style="fill:#C9F5FF;" cx="57.5" cy="150" r="25.5"/>
    <circle seat="18" style="fill:#C9F5FF;" cx="125.8" cy="150" r="25.5"/>
    <circle seat="19" style="fill:#C9F5FF;" cx="194.2" cy="150" r="25.5"/>
    <circle seat="20" style="fill:#C9F5FF;" cx="262.5" cy="150" r="25.5"/>
    <circle seat="21" style="fill:#C9F5FF;" cx="57.5" cy="218.5" r="25.5"/>
    <circle seat="22" style="fill:#C9F5FF;" cx="125.8" cy="218.5" r="25.5"/>
    <circle seat="23" style="fill:#C9F5FF;" cx="194.2" cy="218.5" r="25.5"/>
    <circle seat="24" style="fill:#C9F5FF;" cx="262.5" cy="218.5" r="25.5"/>
  </g>
  <g id="Seats_Front_A" seating-area="seat-front-a" zoom-target="seat-front-a">
    <circle seat="25" style="fill:#C9F5FF;" cx="60.5" cy="306.5" r="25.5"/>
    <circle seat="26" style="fill:#C9F5FF;" cx="128.8" cy="306.5" r="25.5"/>
    <circle seat="27" style="fill:#C9F5FF;" cx="197.2" cy="306.5" r="25.5"/>
    <circle seat="28" style="fill:#C9F5FF;" cx="265.5" cy="306.5" r="25.5"/>
    <circle seat="29" style="fill:#C9F5FF;" cx="60.5" cy="375" r="25.5"/>
    <circle seat="30" style="fill:#C9F5FF;" cx="128.8" cy="375" r="25.5"/>
    <circle seat="31" style="fill:#C9F5FF;" cx="197.2" cy="375" r="25.5"/>
    <circle seat="32" style="fill:#C9F5FF;" cx="265.5" cy="375" r="25.5"/>
    <circle seat="33" style="fill:#C9F5FF;" cx="60.5" cy="443.5" r="25.5"/>
    <circle seat="34" style="fill:#C9F5FF;" cx="128.8" cy="443.5" r="25.5"/>
    <circle seat="35" style="fill:#C9F5FF;" cx="197.2" cy="443.5" r="25.5"/>
    <circle seat="36" style="fill:#C9F5FF;" cx="265.5" cy="443.5" r="25.5"/>
  </g>
  <g id="Seats_Front_b"  seating-area="seat-front-b" zoom-target="seat-front-b">
    <circle seat="37" style="fill:#C9F5FF;" cx="339.5" cy="307.5" r="25.5"/>
    <circle seat="38" style="fill:#C9F5FF;" cx="407.8" cy="307.5" r="25.5"/>
    <circle seat="39" style="fill:#C9F5FF;" cx="476.2" cy="307.5" r="25.5"/>
    <circle seat="44" style="fill:#C9F5FF;" cx="544.5" cy="307.5" r="25.5"/>
    <circle seat="40" style="fill:#C9F5FF;" cx="339.5" cy="376" r="25.5"/>
    <circle seat="41" style="fill:#C9F5FF;" cx="407.8" cy="376" r="25.5"/>
    <circle seat="42" style="fill:#C9F5FF;" cx="476.2" cy="376" r="25.5"/>
    <circle seat="43" style="fill:#C9F5FF;" cx="544.5" cy="376" r="25.5"/>
    <circle seat="45" style="fill:#C9F5FF;" cx="339.5" cy="444.5" r="25.5"/>
    <circle seat="46" style="fill:#C9F5FF;" cx="407.8" cy="444.5" r="25.5"/>
    <circle seat="47" style="fill:#C9F5FF;" cx="476.2" cy="444.5" r="25.5"/>
    <circle seat="48" style="fill:#C9F5FF;" cx="544.5" cy="444.5" r="25.5"/>
  </g>
  <g zoom-target="back-zone">
    <rect id="Back_A" zoom-control="seat-back-a" x="26" y="48" style="fill:#00E91D;" width="269" height="204"/>
    <rect id="Back_B" zoom-controle="seat-back-b" x="310" y="48" style="fill:#00E91D;" width="263" height="204"/>
  </g>
  <rect id="Back_Zone" x="17" y="44" style="fill:#00AAB1;" width="565" height="213" zoom-control="back-zone"/>
  <g zoom-target="front-zone">
    <rect id="Front_A" zoom-control="seat-front-a" x="26" y="273" style="fill:#00E91D;" width="269" height="204"/>
    <rect id="Front_B" zoom-control="seat-front-b" x="310" y="273" style="fill:#00E91D;" width="263" height="204"/>
  </g>
  <rect id="Front_Zone" zoom-control="front-zone" x="17" y="269" style="fill:#830074;" width="565" height="213"/>
</g>

<button id="goToBoard">Go to Board</button>
<button id="goBack">Go Back</button>
<button id="refresh">Refresh</button>
<button id="lock">Test Lock</button>
<button id="unlock">Test Unlock</button>
<button id="reserve">Test Reserve</button>
<button id="unreserve">Test Unreserve</button>
<button id="select">Test Select</button>
<button id="deselect">Test Deselect</button>
<button id="closest1">Closest Left Seats</button>

<script src="test/vendor.bundle.js"></script>
<script src="test/test.bundle.js"></script>

`