svg rect doesnt respond with another div fixed with a high z-index

Question

I want to have the rectangles in the svg tag to show up and change opacity on hover. I had this whole code working, but after adding a fixed div with a high z-index, the svg no longer worked (The hover effect has worked briefly but not consistently so I know that the elements are still where they should be).

<style>
        .hover_group:hover
        {
            opacity:1;
        }
        #projectsvg 
        { 
            position: relative;
            width: 100%; 
            vertical-align: middle; 
            margin: 0; 
            overflow: hidden; 
            margin:10px;

        }
        #projectsvg svg 
        { 
            position: relative; 
            float: left;
            top: 0; 
            left: -199; 

        }
</style>
<div class="row" style="background-image: url(../img/home/blue_bk.jpg);">
    <div class="col-xs-1 col-sm-0"></div>
    <div class="col-xs-10 col-sm-5 col-lg-4">
    <figure id="projectsvg">
        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="500 -50 920 1180" preserveAspectRatio="xMinYMin meet" >
            //set your background image
        <image width="1920" height="1080" xlink:href="../img/home/pain_chart3.png">
        </image>
        <!-- Shoulder-->
        <g class="hover_group" opacity="0">
        <a xlink:href="#">
        <rect x="762" y="130.1" opacity="0.2" fill="#FFFFFF" width="204.6" height="107.8"></rect>
        </a>
        </g>
        <!-- Hand-->
        <g class="hover_group" opacity="0">
        <a xlink:href="#">
        <rect x="762" y="300.1" opacity="0.2" fill="#FFFFFF" width="204.6" height="107.8"></rect>
        </a>
        </g>
        <!-- knee-->
        <g class="hover_group" opacity="0">
        <a xlink:href="#">
        <rect x="862" y="560.1" opacity="0.2" fill="#FFFFFF" width="180.6" height="80.8"></rect>
        </a>
        </g>
        <!-- Elbow-->
        <g class="hover_group" opacity="0">
        <a xlink:href="#">
        <rect x="1132" y="190.1" opacity="0.2" fill="#FFFFFF" width="204.6" height="107.8"></rect>
        </a>
        </g>
        </svg>
    </figure>
    </div>

    <div class="col-xs-12 col-sm-7 col-lg-8">
        <h1>hello</h1>
    </div>

</div>

Is there any way to fix the bug, or do I have to write the code manually?