15

我有一个包含多个组件的 SVG“g”对象。我想使整个事物部分透明（例如 alpha = 0.5），如果可能的话，我还想变暗。我知道可以调整单个填充颜色，但是将它们全部放在一起怎么样，可能在“g”（分组）结构的某些参数中。

4

2 回答 2

19

更改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              -->
于 2013-04-05T16:40:16.297 回答
1

您可以在其本身上设置不透明度<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>
于 2013-04-05T07:27:34.330 回答