Unify Linear Gradients in VML vs SVG

[jvenema]

If you create a VML gradient, the coordinates are relative to the shape, but for SVG, they're relative to the container. This is due to the "gradientUnits", which in svg.js are set to "userSpaceOnUse". This does not work, and should be "objectBoundingBox" to get consistent results across browsers. (Note: it can also be left off, at least in FF, as this is the default value). As a result of this, the x1, x2, y1, y2 coords may need some tweaking as well, I'm not sure. I was playing around with percentages, and they seem to work fairly well across both browsers, as long as a parseFloat() is added prior to using the values in calculations in IE (for example, when calculating the angle for the gradient).

My fix for now is to comment out line 202 of svg.js (setting the gradient units) and to add to vml.js:

dojo.forEach(['x1','x2','y1','y2'],function(x){

if(x in f){ f[x] = parseFloat(f[x]); }

});

prior to calculating and setting the angle.

I have not tested the radial gradients.

[jvenema]

It should be noted that this fix is not 100%; if you rotate the shape, the gradient doesn't move 100% correctly in IE (it fades a little). I haven't confirmed if this behaviour is new after the fix, or was there before as well.

[Eugene Lazutkin]

Closed in favor of #10937.