RE: magic corner gradient revisited

Ok, well for that case at least, I believe the two algorithms produce the same result.

-Brian

-----Original Message-----
From: Tab Atkins Jr. [mailto:jackalmage@gmail.com] 
Sent: Thursday, August 04, 2011 1:36 PM
To: Brian Manthos
Cc: Brad Kemper; fantasai; www-style list
Subject: 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:57:10 UTC