如何将svg形状与svg文本合并(How to merge svg shape with a svg text)

 我在尝试将svg文本与svg形状合并时遇到问题。 这是我当前的代码，白色条只在我的指针在框中时变为灰色，但是当它在字母上时，框变回白色。 如何使它保持灰色，即使我的鼠标在文本上，直到我将指针移离文本和框。 我已经尝试将函数放在<g> ， <a> ， <svg>标签中，但它根本不起作用。 
 
<script>
    function ontop(x){
        x.style.fill = "#c8cace"
    }

    function notOnTop(x){
        x.style.fill = "white"
    }
</script>

    <svg>
    <g>
        <a href="https://google.com" target="_blank" >
        <rect height="50px" width="350px" x="70%" y="14%" fill="white" rx="5px" onmouseenter="ontop(this)" onmouseleave="notOnTop(this)" />
        <text x="72%" y="22%" font-size="20" fill="black" >Google</text>
        </a>
    </g>
    </svg>

Im having problems trying to merge a svg text with an svg shape. This is my current code, the white bar only turn grey when my pointer is in the box, but when it is on the letter, the box turned back white. How do i make it so that it will remain grey even though my mouse is on the text until I move my pointer away from the text and the box. I've tried putting the functions in the <g>,<a>,<svg> tags but it simply won't work.
 
<script>
    function ontop(x){
        x.style.fill = "#c8cace"
    }

    function notOnTop(x){
        x.style.fill = "white"
    }
</script>

    <svg>
    <g>
        <a href="https://google.com" target="_blank" >
        <rect height="50px" width="350px" x="70%" y="14%" fill="white" rx="5px" onmouseenter="ontop(this)" onmouseleave="notOnTop(this)" />
        <text x="72%" y="22%" font-size="20" fill="black" >Google</text>
        </a>
    </g>
    </svg>