SVG / Angular：具有不同阴影的环

Question

我一直在寻找一种解决方案，可以绘制戒指并使每个戒指都具有不同的色调。

结果是我想要的......但我不知道它为什么会起作用。我希望每个戒指都具有相同的颜色。

???

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;
  }
}

Answer 1

这是因为三个圆圈在某些区域相互重叠，从而产生不同的阴影。如果您尝试在各自的 svg 中将这 3 个圆圈分开，您会发现它们具有相同的颜色。

查看我创建的stackblitz。