To summarize the findings from earlier, it appears that removing the gradientUnits="userSpaceOnUse"
attribute and value pair from the <radialGradient>
tag allows for the radial gradient to become (or at least appear to become) elliptical in shape. Also, adding stop-opacity
attributes and values to each <stop>
tag allows for the elliptical gradient effect to be more easily seen (at least for demonstration purposes.)
Here is the code with the above changes made:
<defs>
<radialGradient id="gradientDefinition" >
<stop stop-color="yellow" offset="0%" stop-opacity="0" />
<stop stop-color="red" offset="100%" stop-opacity="1" />
</radialGradient>
</defs>
To show that this code appears to work:
see: elliptical radialGradient
vs circular radialGradient
There is also a tutorial online that appears to provide similar behavior for a similar elliptical gradient approach and the results from that tutorial can be found in this jsFiddle.
Note: If this approach does not work for your purposes, there may be some other, better approach (possibly having to do with gradient transformations, or something similar...)