W3C home > Mailing lists > Public > www-style@w3.org > August 2011

Re: magic corner gradient revisited

From: Tab Atkins Jr. <jackalmage@gmail.com>
Date: Thu, 4 Aug 2011 13:35:42 -0700
Message-ID: <CAAWBYDBPLnkDUhnh=WzkR+j0S96bByObQGV9uYJ_1zaAr83ubA@mail.gmail.com>
To: Brian Manthos <brianman@microsoft.com>
Cc: Brad Kemper <brad.kemper@gmail.com>, fantasai <fantasai.lists@inkedblade.net>, www-style list <www-style@w3.org>
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 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:43 GMT