views:

21

answers:

1

Consider the following svg snippet:

<linearGradient id="redgradient" x1="0%" x2="0%" y1="0%" y2="100%">
    <stop offset="0%" stop-color="#ffffff"/>
    <stop offset="100%" stop-color="#ff0000"/>
</linearGradient>
<rect x="0" y="0" width="400" height="400" fill="url(#redgradient)"/>

Is there a way of specifying that the colours should be blended together using a bell shaped curve? (Similar to the GDI+ LinearGradientBrush::SetBlendBellShape method)

The two rectangles below show the difference - left is without bell blend, right is with bell blend:

alt text

Or is it left to the SVG renderer to decide how the colors should be blended together?

+1  A: 

You can apply a gradientTransform to a linear gradient. I'm not sure how the available transforms map to your required effect.

If that doesn't work you can use the gradient as the input to a filter and perhaps end up with a similar effect. Here's an article which covers combining filters.

robertc
+1 thanks robert - I will do some experimenting to see if I can create a nicer linear gradient that the standard using a filter.
GarethOwen