Opened 10 years ago

Closed 9 years ago

#8750 closed defect (wontfix)

Unify Linear Gradients in VML vs SVG

Reported by: jvenema Owned by: Eugene Lazutkin
Priority: high Milestone: 1.5
Component: DojoX GFX Version: 1.3.0b1
Keywords: gfx, gradient, vml, svg Cc:
Blocked By: Blocking:

Description

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.

Change History (3)

comment:1 Changed 10 years ago by 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.

comment:2 Changed 10 years ago by Eugene Lazutkin

Milestone: 1.4future

comment:3 Changed 9 years ago by Eugene Lazutkin

Milestone: future1.5
Resolution: wontfix
Status: newclosed

Closed in favor of #10937.

Note: See TracTickets for help on using tickets.