Menu
What is the difference in opacity vs fill-opacity in SVG?
I referred the docs for fill-opacity and opacity but I am confused what is meant by
fill-opacity: opacity of the content of the current object
vs
opacity: transparency of an object
677
The fill-opacity attribute is a presentation attribute defining the opacity of the paint server (color, gradient, pattern, etc.) applied to a shape. Note: As a presentation attribute fill-opacity can be used as a CSS property.
The opacity attribute specifies the transparency of an object or of a group of objects, that is, the degree to which the background behind the element is overlaid.
SVG uses three distinct properties to control opacity of basic shapes and text: opacity , fill-opacity , and stroke-opacity . All of these can be set with presentation attributes or with CSS style rules.
The fill attribute has two different meanings. For shapes and text it's a presentation attribute that defines the color (or any SVG paint servers like gradients or patterns) used to paint the element; for animation it defines the final state of the animation.
In addition to affecting which parts of each individual element are affected (e.g. fill versus stroke) another difference is what happens when elements overlap within a group. opacity affects the transparency of the group as a whole while fill-opacity affects the transparency of the individual elements within the group. One consequence of this is that when elements within such a group overlap, there is a compounding effect in the region of overlap when fill-opacity is used but not when opacity is used. This is demonstrated in the image below when a (fill-)opacity of 0.5 is applied to either each element within a group or to the group itself.
<svg height="200">
<g transform="translate(0, 0)">
<rect x="10" y="10" width="40" height="40" fill-opacity="0.5"/>
<rect x="30" y="30" width="40" height="40" fill-opacity="0.5"/>
</g>
<g transform="translate(80, 0)" fill-opacity="0.5">
<rect x="10" y="10" width="40" height="40"/>
<rect x="30" y="30" width="40" height="40"/>
</g>
<g transform="translate(0, 80)">
<rect x="10" y="10" width="40" height="40" opacity="0.5"/>
<rect x="30" y="30" width="40" height="40" opacity="0.5"/>
</g>
<g transform="translate(80, 80)" opacity="0.5">
<rect x="10" y="10" width="40" height="40"/>
<rect x="30" y="30" width="40" height="40"/>
</g>
<text transform="translate(170,45)">fill-opacity</text>
<text transform="translate(170,125)">opacity</text>
<text transform="translate(10,175)">applied to</text>
<text transform="translate(0,190)">each element</text>
<text transform="translate(90,175)">applied to</text>
<text transform="translate(103,190)">group</text>
</svg>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
