SVG组的不透明度/半透明可以一起调整吗？

我有一个SVG“g”对象，它有几个组件。我想把整个东西渲染成部分透明（例如alpha=0.5），如果可能的话，我也希望颜色更暗。我知道单个填充颜色可以调整，但是所有填充颜色一起调整如何，可能是在“g”（分组）结构的一些参数中。

您可以在

本身上设置不透明度，这样就可以了。如果你想让它更暗，你需要对

应用一个过滤器，也许是沿着这些线

    <filter id="Darker" filterUnits="objectBoundingBox" x="0" y="0" width="100%" height="100%">
      <feFlood in="SourceGraphic" flood-color="#0f0" flood-opacity="0.5" result="img2"/>
      <feBlend in="SourceGraphic" in2="img2" mode="darken"/>
    </filter>

---

更改

的

不透明度

（通过

不透明度=“…”

属性或

不透明度

CSS规则）将首先合成组的内容，然后以不透明度降低结果。请注意，这与降低组内所有元素的不透明度明显不同（您也可以通过CSS进行此操作）：

演示：

使用以下SVG：

…使用此CSS：

圆圈{填充：红色}
rect{fill:blue}
#g2*{opacity:0.5}/*更改每个形状的不透明度*/
#g3{opacity:0.5}/*更改组的不透明度*/
#g4{filter:url（#深色）}/*使组变暗并降低不透明度*/

请特别注意圆形和方形重叠处的外观差异

feColorMatrix

过滤器看起来令人望而生畏。它所做的只是将每个RGB值设置为原始RGB的30%（即较暗），将alpha设置为原始alpha的80%。根据需要更改值

---

哦，如果你想去饱和，你也可以把它扔进过滤器（在变暗步骤之前或之后）：

+1以获取良好信息。虽然我不确定过滤器是否完全正确；它在所有透明区域留下50%的绿色，通常给世界蒙上一层绿色的阴影请参阅我的答案，了解不同的“较暗”过滤器。这是一个极好的答案。非常感谢。feColorMatrix的威力令人望而生畏。看起来你可以通过使用3D旋转矩阵来改变色调。@MattD是的，你可以，但很方便的是，规范允许一个。不幸的是，从2014年10月14日起，JSFIDLE似乎在Chrome、Ffx中被破坏了-将width=“400”height=“400”属性添加到标记中，使其显示所有4个示例。更新了小提琴以反映这一点。