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

Question

我有一个SVG“g”对象，它有几个组件。我想让整个事物部分透明（例如alpha = 0.5）我也希望尽可能地变暗。我知道可以调整各个填充颜色，但是所有这些颜色可以一起调整，可能在“g”（分组）结构的某些参数中。

Answer 1

更改opacity的{​​{1}}（通过<g>属性或opacity="..." CSS规则）将导致首先合成群组的内容，那么结果要降低不透明度。请注意，这与降低组内所有元素的不透明度（您也可以通过CSS执行）明显不同：

演示：http://jsfiddle.net/HZr7v/12/

使用此SVG：

opacity

...用这个CSS：

<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400">
    <defs><filter id="Darker">
      <feColorMatrix type="matrix" values="
       0.3  0   0   0   0
        0  0.3  0   0   0
        0   0  0.3  0   0
        0   0   0  0.8  0"/>
    </filter></defs>
    <g id="g1" transform="translate(60,60)"> <!-- top left -->
        <circle r="40" /><rect width="80" height="60" />
    </g>
    <g id="g2" transform="translate(220,60)"><!-- top right -->
        <circle r="40" /><rect width="80" height="60" />
    </g>
    <g id="g3" transform="translate(60,200)"><!-- bottom left -->
        <circle r="40" /><rect width="80" height="60" />
    </g>
    <g id="g4" transform="translate(220,200)"><!-- bottom right -->
        <circle r="40" /><rect width="80" height="60" />
    </g>
</svg>

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

circle { fill:red } rect { fill:blue } #g2 * { opacity:0.5 } /* Change the opacity of each shape */ #g3 { opacity:0.5 } /* Change the opacity of the group */ #g4 { filter:url(#Darker) } /* Darkens and drops opacity for group */ 过滤器看起来令人生畏。它所做的就是将每个RGB值设置为原始RGB的30％（即较暗），并将alpha设置为原始alpha的80％。根据需要更改值。

---

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

feColorMatrix

Answer 2

您可以在<g>本身上设置不透明度，这样可行。如果你想要它更暗，你需要在<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>