Ответ 1
Изменение opacity <g> (либо с помощью атрибута opacity="...", либо правила CSS opacity) приведет к тому, что содержимое группы будет сначала скомпоновано, а затем результат будет уменьшен в непрозрачности, Обратите внимание, что это явно отличается от уменьшения непрозрачности для всех элементов внутри группы (что вы также можете сделать с помощью 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>
& hellip; с помощью этого 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 для каждого из них - 30% от исходного RGB (т.е. Темнее), а альфа - 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 -->