CODEWITHSUNDEEP
svgopacityfill
Mark Ingram
Mark Ingram

Reputation: 73605

SVG linear gradient fill with opacity gradient

I've been reading the SVG specification and trying to find out whether you can have a combined fill and opacity gradient, but with the fill and opacity at different angles?

See the following example:

<linearGradient id="MyFill" gradientUnits="objectBoundingBox">
    <stop offset="0%" stop-color="#FF0000" />
    <stop offset="100%" stop-color="#0000FF" />
</linearGradient>

<linearGradient id="MyTransparency" gradientUnits="objectBoundingBox">
    <stop offset="0%" stop-opacity="0%" x1="50%" x2="50%" />
    <stop offset="100%" stop-opacity="100%" x1="50%" x2="50%" />
</linearGradient>

The opacity is defined at a different angle to the fill, how can I combine these into one fill? Or if I can't, how can I apply this to a single object?

Upvotes: 1

Views: 3474

Answers (1)

Erik Dahlstr&#246;m
Erik Dahlstr&#246;m

Reputation: 60966

It's not supported in SVG 1.1, but you can probably do a workaround with e.g filter markup to combine the gradients (an example), or <use> to apply different gradients to the same element that way, or write a script to do the color interpolation yourself.

Upvotes: 3

Related Questions