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 我创建的。

SVG/Angular: 不同颜色的戒指

SVG/Angular: rings with different shade

svg

angular