SVG Gradients with ObjectBoundingBox units and gradientTransform with rotation - svg

Question

Trying to replicate an SVG gradient with canvas drawing in javascript i came across this use case:
<svg xmlns="http://www.w3.org/2000/svg" width="760" height="760"
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 380 380">
<defs>
<linearGradient id="three_stops_4" gradientTransform="rotate(90)">
<stop offset="0%" style="stop-color: #ffcc00;"/>
<stop offset="33.3%" style="stop-color: #cc6699; stop-opacity: 1"/>
<stop offset="100%" style="stop-color: #66cc99; stop-opacity: 1"/>
</linearGradient>
<polygon id="base" points="5,5 35,5 35,40 5,40 5,35 30,35 30,10 5,10" />
<rect width="35" height="80" id="base2" />
</defs>
<polygon transform="translate(0, 45)" points="5,5 80,5 80,40 5,40 5,35 75,35 75,10 5,10" style="fill: url(#three_stops_4); stroke: black;"/>
</svg>
That render like this:
Now those are the specs:
https://www.w3.org/TR/SVG11/pservers.html#LinearGradientElementGradientUnitsAttribute
What i do not understand is if:
1) the object bounding box transformation is applied to the gradient coordinates and then the gradient transform is applied.
OR
2) the gradientTransform is applied to the object bounding box and the the gradient coordinates are transformed.
The specs seems to say to take in the consideration the first option, but the point is that while the gradient should stretch from the whole width of the object, i clearly see it in the rendering that being rotated it stretches for the height of the object.
There is an additional stretching ( compression ) that seems to come from the object bounding box aspect ratio, applied after the rotation.
Does anyone know how exactly the renderer should behave?

Answer 1

It says in the spec (under gradientTransform):
This additional transformation matrix is post-multiplied to (i.e., inserted to the right of) any previously defined transformations, including the implicit transformation necessary to convert from object bounding box units to user space.
So depending on how you like to think about matrix multiplication, both answers are correct. In my way of thinking about it (transforms are applied right to left) #2 is correct. The gradient transform is applied first. Then the objectBoundingBox transform is applied. In pseudo code:
ctx.transform(gradientTransform)
ctx.transform(objectBoundingBoxTransform)
But it also depends on what 2D rendering library you are using, and whether you are using pre- or post- multiplication. Some rendering libraries let you set a transform matrix on the gradient object. For example, in Android you can do:
LinearGradient grad = new LinearGradient(...);
grad.setLocalMatrix(gradientTransformMatrix);

Answer 2

The accepted answer is the one that guided me to the solution.
The problem was translating some SVG peculiarities to JS canvas rendering.
That is hard and sometimes not possible at all with simple gradients.
For gradients that get applied to a filled shape, and that are boundingbox units and also have a gradientTrasnfrom attribute, you should:
var t = myGradientTransform;
MakeAPathForMyShape(ctx);
ctx.transform(width, 0, 0, height, minX, minY);
ctx.transform(t[0], t[1], t[2], t[3], t[4], t[5], t[6]);
ctx.fill();
This works most of the time if you are using ctx.fill, does not work if you are using fillRect or fillText, because you cannot put transformations in the middle of the path traced and the fill operation.
Now let's talk of the stroke.
If you use the code above with stroke, you are going to apply the gradient transform to your strokeWidth, thing that maybe you do not want to.
If the scaling is not uniform between X and Y, you cannot compensate with changing ctx.strokeWidth;
A solution i had to fallback to, is to create a pattern and apply that.
So i calculate a bounding box for my shape, and i create a canvas with the same size.
Then make a path as big as the canvas, using its perimeter, and i use the above code on that context.
At this point i have a rect, as big as my shape, with the transformed gradient applied over.
Now i create a pattern from it:
ctx.strokeStyle = ctx.createPattern(tmpCanvas, 'no-repeat');
ctx.stroke();
in this way i can apply the transform to the gradient and not to the stroke size.
In the research i also evaluated the idea of transforming the normal of the gradient and find back again the points that would generate a transformed gradient in a non transformed space. This can work for linear gradients, but not for radial gradients, that get an ellipse shape and do need a classic trasnform to work.