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?

回答1:

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.

来源：https://stackoverflow.com/questions/7725186/svg-linear-gradient-fill-with-opacity-gradient