为什么填充不透明度会改变填充的阴影？

Question

我在这里有一张地图：http://abehandler.github.io/（用D3和Leaflet创建）

地图的SVG元素的填充属性设置为红色或蓝色。但它显示三种颜色：红色，蓝色和紫色。我注意到如果我将填充不透明度设置为1 - 那么地图上的多边形就会有适当的阴影。但是，如果我开始将填充不透明度更改为小于1，则多边形的阴影开始变化。

我想要半透明的多边形 - 但我不希望阴影改变。为什么改变不透明度会改变阴影？我该如何防止这种情况？

Answer 1

您所看到的是背景颜色与多边形的半透明颜色混合在一起。这会产生您看到的新混合色。这非常符合设计，没有办法禁用它。

想想白色背景上的黑色圆圈 - 当您将其不透明度设置为0.5时，可以通过圆圈看到白色背景，结果颜色为50％灰色。

如果要使用透明度，除非将背景设置为与半透明前景完全相同的颜色，否则无法真正防止这种情况发生。