Can the opacity / translucence of an SVG group be adjusted together?
I have an SVG "g" object that has several components. I'd like to render the whole thing partly transparent (e.g. alpha = 0.5) I'd also like to to be darker if possible. I know individual fill colors can be adjusted, but how about all of them together, possibly in some parameters to the "g" (grouping) structure. Solved Changing the opacity of the (either by the opacity="..." attribute, or the opacity CSS rule) will cause the contents of the group to first be composited and then the result to be lowered in opacity. Note that this is distinctly different from lowering the opacity on all the elements inside the group (which you can also do via CSS): Demo: http://jsfiddle.net/HZr7v/12/ Uses this SVG: …with this CSS: circle { fill:red } rect { fill:blue } #g2 * { opacity:0.5 } /* Change the opacity of each shape */ #g3 ...