Search code examples
flashsvglinear-gradientsgradientradial-gradients

Display SVG gradients using Flash?

I'm using AS3 (Flash) to read SVG files and display them. The problem is correctly displaying a linear/radial gradient.

Following is an example of a simple linear gradient from Red to Blue, in SVG.

<linearGradient id="GRADIENT_1" gradientUnits="userSpaceOnUse"
x1="107.3938" y1="515.5684" x2="105.2488" y2="428.8614"
gradientTransform="matrix(0.9988 0.0485 0.0485 -0.9988 0.8489 711.6634)">

    <stop  offset="0" style="stop-color:red"/>
    <stop  offset="1" style="stop-color:blue"/>

</linearGradient>

I've been able to read the colors from the gradient (stop's styles), and their spacing through the gradient (stop's offsets).

Okay, so now I've got a nice gradient with the right colors and right amount of space between them, but with NO rotation or scale, and its off position!.

The answer is to feed a Matrix into Flash's gradient function.

Method 1: Use the supplied matrix

The Matrix supplied by SVG, gradientTransform="matrix(a,b,c,d,e,f)" appears to be effectively useless since when you feed that matrix into Flash's beginGradientFill() function, it displays the gradient stretched over the shape so much so only the center color of the gradient is visible, like a solid fill.

Method 2: Generate a Matrix using 2 gradient points

  • The x1, y1 tags might be the point on screen where the gradient begins at.
  • The x2, y2 tags, might be the point on screen where the gradient ends.

When I say "2 gradient points", I'm referring to x1,y1 and x2,y2, which are mostly telling you where on the shape does the gradient start & end.

There's the Matrix.createGradientBox() function which creates a matrix for use with gradients, but the parameters are very different than what SVG gives me. It wants:

  1. Width --- used the relative distance between the 2 gradient points here (X axis)
  2. Height --- used the relative distance between the 2 gradient points here (Y axis), but got incorrect results --- also tried using the distance between the 2 gradient points here, but I didn't know what to fill into Width!
  3. Rotation angle -- used the angle of the 2 gradient points, in radians, with incorrect results!
  4. Translation x -- tried 1st gradient point's X, also tried 0, with incorrect results!
  5. Translation y -- tried 1st gradient point's Y, also tried 0, with incorrect results!

What SVG data can I use to generate a gradient Matrix for Flash?

(Look at the SVG snippet above, that's all the data I have describing the gradient)

Solution

  • How to draw a linear gradient using the 2 gradient points

    1. x1,y1 and x2,y2 are the 2 points on the screen coordinate space, that the gradient is to be drawn from, to.
    2. Use the transformation matrix supplied by SVG to offset the x1,y1 and x2,y2 points. -- gradientTransform="matrix(a,b,c,d,e,f)
    3. Draw the gradient from x1,y1 to x2,y2.

    i.e.

    x1, y1, x2, y2 represent values in the coordinate system that results from taking the current user coordinate system in place for the element referencing the gradient (via a 'fill' or 'stroke' property) at the time when the gradient element is referenced, and then applying the transform specified by attribute gradientTransform.

    via W3C Docs.