Alternatively clicking on two overlapping svgs - html

Question

I'm trying to create a buttons panel for a web page. I made the buttons with .svg files. Using margins an other css attributes i got them to the position shown in the code.
My problem:
I can't make both buttons fully clickable, specifically, I can use the orange part just fine, but the bottom half of the white circle, which is overlapping the orange's bounding-box, I cannot click on ,the top area is good.
Of course i wanna be able to successfully click anywhere in the white or the orange, without the overlapping interfering.
I've been reading on pointer events and figure they are the solution, but i can't figure out where (html or css) to use them or how. Also i'm not sure which property would be correct.
How the buttons are working
<!--my html code-->
<div id="brand">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 106 106">
<defs>
<style>.cls-1{fill:#ffffff;}</style>
</defs>
<a xlink:href="index.html">
<path class="cls-1" d="M67.78,52.28a5.58,5.58,0,0,0-6,0,6,6,0,0,0-2.11,2.45,9.11,9.11,0,0,0,0,7.42,6,6,0,0,0,2.11,2.45,5.58,5.58,0,0,0,6,0,6.05,6.05,0,0,0,2.11-2.45,9.11,9.11,0,0,0,0-7.42A6.05,6.05,0,0,0,67.78,52.28Z"/><path class="cls-1" d="M53,0a53,53,0,1,0,53,53A53.06,53.06,0,0,0,53,0ZM77.67,78.67a10,10,0,0,1-4.3.91A13.53,13.53,0,0,1,69.14,79a12.7,12.7,0,0,1-3.74-2.09,34.09,34.09,0,0,1-4.26-4.15A13.74,13.74,0,0,1,55.34,70a14.09,14.09,0,0,1-3.91-5A15,15,0,0,1,50,58.44L50,45.66,43.86,55.92H39.69L33.61,46.1V58.44H25v-28h7.77L41.9,45.34,50.79,30.4h7.77L58.6,45a15.72,15.72,0,0,1,6.2-1.21,15.38,15.38,0,0,1,7.6,1.88,13.68,13.68,0,0,1,5.27,5.24,15,15,0,0,1,1.91,7.56A14.78,14.78,0,0,1,77.3,66.6a13.64,13.64,0,0,1-6.17,5.24,3.52,3.52,0,0,0,1.14.9,3.13,3.13,0,0,0,1.29.26,4.94,4.94,0,0,0,3.63-1.81L81,76A9,9,0,0,1,77.67,78.67Z"/>
</a>
</svg>
</div>
<div id="reserve">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 944.38 115.07">
<defs>
<style>.cls-2{fill:#ff7800;}</style>
</defs>
<a xlink:href="reserve.html">
<path class="cls-2" d="M494.41,80.8h-3.78v7h3.78a4.7,4.7,0,0,0,3.15-.91,3.23,3.23,0,0,0,1.07-2.59,3.27,3.27,0,0,0-1.07-2.61A4.65,4.65,0,0,0,494.41,80.8Z"/><path class="cls-2" d="M400.62,80.8h-3.77v7h3.77a4.73,4.73,0,0,0,3.16-.91,3.23,3.23,0,0,0,1.07-2.59,3.27,3.27,0,0,0-1.07-2.61A4.68,4.68,0,0,0,400.62,80.8Z"/><path class="cls-2" d="M940.67,10a55.59,55.59,0,0,0,3.71-10H535.66A63.67,63.67,0,0,1,474,59.85h-3.54A63.67,63.67,0,0,1,408.72,0H0A55.59,55.59,0,0,0,3.71,10H364.28V20H9.42a68.63,68.63,0,0,0,8.32,10H364.28V40H30.75C40.78,45.88,53.9,50,71,50H364.29V98.82a16.24,16.24,0,0,0,16.25,16.25h183.3A16.25,16.25,0,0,0,580.1,98.82V50H873.4c17.08,0,30.2-4.12,40.23-10H580.1V30H926.64A68.52,68.52,0,0,0,935,20H580.1V10ZM404.92,99.48l-4.36-6.39h-3.71v6.39h-6.8v-24h11a13.71,13.71,0,0,1,5.66,1.08,8.75,8.75,0,0,1,3.8,12.37,8.38,8.38,0,0,1-3.49,3l5.19,7.55Zm29.84,0h-19.3v-24h18.85V80.7H422.19v4h10.68v5.08H422.19v4.4h12.57Zm21.67-3.36a8.25,8.25,0,0,1-3.61,2.79,14.55,14.55,0,0,1-5.84,1,22.23,22.23,0,0,1-5.66-.72,14,14,0,0,1-4.47-1.92l2.23-5A14.38,14.38,0,0,0,442.83,94a14.06,14.06,0,0,0,4.19.65c2.61,0,3.91-.65,3.91-2a1.62,1.62,0,0,0-1.11-1.53,21.14,21.14,0,0,0-3.59-1,35.84,35.84,0,0,1-4.54-1.25,7.63,7.63,0,0,1-3.12-2.15,5.79,5.79,0,0,1-1.31-4,6.84,6.84,0,0,1,1.21-4,8,8,0,0,1,3.59-2.8,14.69,14.69,0,0,1,5.85-1,20.9,20.9,0,0,1,4.67.53,14.31,14.31,0,0,1,4.05,1.57l-2.09,5a14.06,14.06,0,0,0-6.66-1.85,5.63,5.63,0,0,0-3,.6,1.79,1.79,0,0,0-.92,1.56,1.55,1.55,0,0,0,1.09,1.45,20.1,20.1,0,0,0,3.54,1,34.24,34.24,0,0,1,4.55,1.25,8,8,0,0,1,3.13,2.13,5.72,5.72,0,0,1,1.32,4A6.8,6.8,0,0,1,456.43,96.12Zm23.62,3.36h-19.3v-24h18.86V80.7H467.48v4h10.68v5.08H467.48v4.4h12.57Zm18.65,0-4.36-6.39h-3.71v6.39h-6.8v-24h11a13.71,13.71,0,0,1,5.66,1.08,8.42,8.42,0,0,1,3.71,3.09,8.5,8.5,0,0,1,1.31,4.73,8.41,8.41,0,0,1-1.22,4.55,8.32,8.32,0,0,1-3.49,3L506,99.48Zm24.62,0h-6.7l-10.26-24h7.34l6.53,15.66,6.66-15.66h6.73Zm31,0H535v-24h18.85V80.7H541.76v4h10.68v5.08H541.76v4.4h12.57Z"/>
</a>
</svg>
</div>
<!--my css (wide interface being a mayor div that encases all the buttons)-->
#brand { margin: auto; }
#reserve { margin: auto; }
#media screen and (min-width: 751px) {
#brand { width: 11%; overflow: hidden; }
#reserve { width: 95%; margin-top: -5.4%; overflow: hidden; }
#wide-interface { overflow: hidden; white-space: nowrap; letter-spacing: 5px; text-align: center; }
}

Answer 1

You need to apply a clipPath to the white circle to restrict that shape.
By default, pointer-events must not be dispatched on the clipped
(non-visible) regions of a shape.
You will need to adjust the radius and coordinates but something like;
<clipPath id="myClip">
<circle cx="53" cy="25" r="25" />
</clipPath>