Creating a web page buttons panel using .svg files has been an interesting challenge. After adjusting margins and other CSS attributes, I managed to position the buttons as seen in the code.
The issue at hand: I'm facing difficulty with making both buttons fully clickable. Although I can easily interact with the orange part of the button, the bottom half of the white circle, which overlaps with the orange's bounding box, remains unclickable while the top area works fine.
I aim to achieve complete clickability within both the white and orange areas without any interference from overlapping elements.
After exploring pointer events, it seems like they might hold the solution. However, I'm unsure about where (HTML or CSS) to implement them and how to proceed. Additionally, identifying the correct property for this situation is another hurdle.
View how the buttons currently function
<!--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...
</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.61,A4.65,...
</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; }
}