SVG：关于事件的对象分层

Question

我对 SVG 的分层和事件有疑问。

示例位于：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 = '';
}

即使我是黄色的，我也想变成灰色的，因为黄色在灰色里面。所以从悬停的角度来看，灰色应该在前景中，但黄色可见。
但我也希望能够单击黄色 - 因此黄色应该在前景中。

有没有办法同时获得两者？

Answer 1

这两个 rect 是兄弟姐妹，所以你不能冒充这个事件。

要么在黄色矩形上复制 mouseenter 事件：

<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" 
        (mouseenter)="txtg='in grey'"
        (click)="txty='yellow clicked'" 
        (mouseleave)="txty=''"
    />
</svg>

或者您将两者都包含在 g 中并在其上设置 mouseenter 和 mouseleave 事件：

<svg xmlns="http://www.w3.org/2000/svg" height="400px" width="400px">

    <g (mouseenter)="txtg='in grey'" (mouseleave)="txtg=''">
        <rect x="30" y="30" width="100" height="100" fill="grey" />
        <rect x="70" y="70" width="50" height="50" fill="yellow"
            (click)="txty='yellow clicked'" 
            (mouseleave)="txty=''" 
            pointer-events="all"
        />
    </g>
</svg>

SVG：关于事件的对象分层

SVG: layering of objects regarding events

css

svg

angular