Re: magic corner gradient revisited

On Thu, Aug 4, 2011 at 1:23 PM, Brian Manthos <brianman@microsoft.com> wrote:
> Tab Atkins Jr.:
>> As well, there are two distinct and very different ways
>> of achieving the magic corner gradient that I know of
>> (adjust the angle, or do the entire thing in
>> objectBoundingBox coords scale).
>
> I think by "adjust the angle" you're referring to my algorithm.

Yes.


> I'm unclear on what you mean by the "scale" approach.
>
> Can you elaborate on this?  Or maybe offer some renderings?

Whoops, didn't mean to leave the word "scale" in there.

I'm referring to how SVG does linear gradients when
gradientUnits="objectBoundingBox".  For example:

<!doctype html>
<svg>
 <defs>
  <linearGradient id=foo x1=0 y1=0 x2=1 y2=1 gradientUnits="objectBoundingBox">
   <stop offset=0% stop-color=red />
   <stop offset=50% stop-color=white />
   <stop offset=100% stop-color=blue />
  </linearGradient>
 </defs>
 <rect x=0 y=0 width=300 height=100 fill=url(#foo) />
</svg>

In this coordinate space, the units are such that 1 unit horizontally
is the width of the box it's used in, and 1 unit vertically is the
height of the box it's used in.  In other words, you draw the gradient
into a square, and then scale it to fill the box.  This gives you the
"magic corner" behavior, in addition to a few other interesting bits.
You lose, however, the ability to use absolute lengths when placing
stops, unless some extra magic goes on.

~TJ

Received on Thursday, 4 August 2011 20:36:36 UTC