Search code examples
svgtransparency

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.

Solution

  • Changing the opacity of the <g> (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/

    enter image description here

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

    …with this 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 */

    Note in particular the difference in appearance where the circle and square overlap.

    The feColorMatrix filter looks daunting. All it does is set the RGB values to each be 30% of the original RGB (i.e. darker), and the alpha to be 80% of the original alpha. Change the values as you see fit.

    Oh, and if you want to desaturate also you can throw this into the filter (before or after the darken step):

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