SVG/Angular: rings with different shade-CodePudding

I was looking for a solution that draws rings and make every ring with a different shade.

The result is what I want ... but I have no idea why it is working. I would expect every ring with the SAME color.

???

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `

<svg [attr.height]="dimension" [attr.width]="dimension" [attr.viewBox]="'-'   dimension   ' -'   dimension   ' '   dimension * 2   ' '   dimension * 2">
 <circle [attr.cx]="0" [attr.cy]="0" [attr.r]="dimension" [attr.fill]="foo()"><title>{{ foo () }}</title></circle>
 <circle [attr.cx]="0" [attr.cy]="0" [attr.r]="dimension/100*50" [attr.fill]="foo ()"><title>{{ foo () }}</title></circle>
 <circle [attr.cx]="0" [attr.cy]="0" [attr.r]="dimension/100*10" [attr.fill]="foo ()"><title>{{ foo () }}</title></circle>
</svg>
`
})
export class AppComponent
{
  dimension : number = 500;


  foo ()
  {
    return "#"   0xBBAABB;
  }
}

CodePudding user response：

It is because the three circles are overlapping each other in certain areas, thus produces the different shades. If you try to separate those 3 circles in their own svg, you will find them having the same color.

Check this stackblitz I created.