Changing how opacity works is not an option. It is a group property, not an inherited one. It takes the rendered and composited group, and adjusts alpha. For its original purpose in 2D SVG, this is essential. You can create an image from many different shapes, one for each color, and have it fade in and out as a whole, without revealing the underlying layering. Would it be possible to instead add a different property (say, "alpha"), which *is* inheritable, not group, and adjusts the alpha of every paint operation by that factor? It would be similar to applying opacity to leaf nodes, but you could set it once on the group and have it inherit. It would also have to apply to each background, text, etc., separately, so that container elements with a mix of child content plus their own background/text wouldn't end up compounding the transparency of their children. For any child element that you *wanted* to treat as a flattened layer, you would set alpha=1 and opacity=*alpha-factor* (possibly using CSS variables to keep track of what your alpha factor is). Those of you who know more than me about how compositing is implemented, does this sound feasible? Otherwise, my best recommendation to people who want the 3D opacity effect is to use CSS variables to set your alpha factor on your group, and then use opacity:var(--alpha) on any (flat) layer that actually includes painted content. Unfortunately, however, for now that means not being able to use CSS animations/transitions or web animation to transition alpha. We're still waiting for typed CSS custom properties that can be interpolated. ~ABR
Received on Monday, 19 September 2016 14:49:05 UTC