I have a SVG in Angular and I am not sure how the filling works.

foo does overlap and darkens each circle, bar does not. To me it seems both should produce the same result.

???

https://stackblitz.com/edit/angular-ivy-dog597?file=src/app/app.component.ts

CodePudding user response：

'#' 0xaaaaaa; serialises to #11184810 because the value 0xaaaaaa is converted to decimal you can see that if you add something like console.log('#' 0xaaaaaa);

then 11184810 is interpreted as hex rgba by the browser i.e. red = 11, green = 18, blue = 48 and alpha = 10.

I guess what you really want is something like this perhaps...

console.log('#'   0xaaaaaa.toString(16));