stopopacity

Stop-opacity is a presentation attribute used in Scalable Vector Graphics (SVG) to control the transparency of a gradient stop. Each stop within a gradient (defined by a stop element inside linearGradient or radialGradient) can specify a stop-color and a stop-opacity. The value ranges from 0 to 1, where 0 is fully transparent and 1 is fully opaque. The stop-opacity value determines the alpha of the stop’s color at that position and can interact with any overall opacity applied to the gradient or the element containing it.

Usage and syntax: In a gradient, you assign an offset and a stop-color, and optionally a stop-opacity. For example, a gradient can include: <linearGradient id="g"><stop offset="0%" stop-color="#f06" stop-opacity="1"/><stop offset="100%" stop-color="#f06" stop-opacity="0"/></linearGradient>. This creates a fade from solid at the start to transparent at the end. If you also apply opacity to the gradient element or its parent shapes, that opacity multiplies with the stop-opacity value.

Considerations: stop-opacity provides a straightforward way to fade a gradient without changing the stop color itself. If you use an RGBA color value for stop-color, you effectively embed transparency in the color, and stop-opacity works alongside that value. In practice, many authors rely on stop-opacity with solid stop-colors to achieve smooth fades.

Compatibility and scope: stop-opacity is supported in standard SVG across major browsers. It pertains to SVG gradient definitions and is not a CSS property that applies outside of SVG gradients. Related concepts include stop-color, linearGradient, and radialGradient.