我對 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 = '';
}
即使我是黃色的，我也想是灰色的，因為黃色在灰色里面。所以從懸停的角度來看，灰色應該在前景中，但黃色可見。
但我也希望能夠點擊黃色 - 所以黃色應該在前臺。
有沒有辦法讓我兩者兼得？
uj5u.com熱心網友回復：
這兩個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>
或者您將兩者都包含在 a 中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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/359342.html
上一篇：如何使用遮罩使顏色透明
下一篇：Angular：事件的SVG屬性