I am struggling with layering and event handling in an SVG element.
Check out the example here: https://stackblitz.com/edit/angular-ivy-rkxuic?file=src/app/app.component.ts
app.component.ts
import { Component, VERSION } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<svg xmlns="http://www.w3.org/2000/svg" height="400px" width="400px">
<rect x="30" y="30" width="100" height="100" fill="grey" (mouseenter)="txtg='in grey'" (mouseleave)="txtg=''" />
<rect x="70" y="70" width="50" height="50" fill="yellow"
(click)="txty='yellow clicked'" (mouseleave)="txty=''" pointer-events="all"/>
</svg>
<p>
txtg: {{txtg}}<br/>
txty: {{txty}}
`,
})
export class AppComponent {
txtg: string = '';
txty: string = '';
}
My challenge is achieving proper visibility when hovering over elements. I want the yellow rectangle to appear on top of the grey one but still be able to interact with both.
If I click on the yellow rectangle, it should come to the foreground while maintaining interaction with the grey rectangle.
Is there a way to achieve both requirements simultaneously?