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

Question

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

Answer 1

改变opacity的<g>(或者是opacity="..."属性或opacityCSS规则)将导致该组中的内容到第一被合成,然后在不透明度被降低的结果.请注意,这与降低组内所有元素的不透明度(您也可以通过CSS执行)明显不同:

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

使用此SVG:

<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>

...用这个CSS:

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 */

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

该feColorMatrix过滤器相当严峻.它所做的就是将每个RGB值设置为原始RGB的30%(即较暗),并将alpha设置为原始alpha的80%.根据需要更改值.

哦,如果你想减少饱和度,你可以将它扔进过滤器(在变暗步骤之前或之后):

<feColorMatrix type="saturate" values="0.5"/>
<!-- values="0"  will drop all color, leaving grayscale only -->
<!-- values="1"  will leave the current saturation color     -->
<!-- values="99" will super-saturate the colors              -->