Подтвердить что ты не робот

Можно ли отрегулировать непрозрачность/прозрачность группы SVG?

У меня есть объект SVG "g", который имеет несколько компонентов. Я хотел бы сделать все это частично прозрачным (например, альфа = 0,5). Я также хотел бы быть темнее, если это возможно. Я знаю, что отдельные цвета заливки могут быть скорректированы, но как обо всех их вместе, возможно, в некоторых параметрах в структуру "g" (группировка).

Ответ 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              -->

Ответ 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>