Under transparent places of the SVG container to use links?

Question

css

Welcome all!
Folks, the question is, there is an SVG object on an HTML page, in the form of a curved wave: the

container has its own length and width (highlighted in red), the object has a blue background and transparency around it.
Below is a link with a background.
But the link does not work under SVG whatever one may say.
If you use z-indexes, then the yellow background will be over the blue and the link will work.
What I want is for the yellow background to remain under the blue, and for the link itself to be above the SVG.
Something has already broken the brain how to do.
Is it possible to apply a mask to the SVG so that the transparent area is available?
What people have any ideas?
Thank you in advance!

Answer 1

pointer-events: nonefor svg
https://webref.ru/css/pointer-events

Answer 2

Container with background under svg (z-index: -1). A link to a container with no background above the svg (z-index: 10). But something tells me that this is a fierce crutch