W3C home > Mailing lists > Public > public-fx@w3.org > January to March 2010

Coordinate spaces in SVG and CSS

From: Tab Atkins Jr. <jackalmage@gmail.com>
Date: Wed, 24 Mar 2010 17:00:19 -0700
Message-ID: <dd0fbad1003241700x5d08b5b6v7f9ff8de51da1ead@mail.gmail.com>
To: public-fx@w3.org
I'm trying to spec background-repeat:extend in the CSS3 Images module.
 This new value is essentially designed for gradients, but has
potential application to SVG as well, and I'd like some collaboration
on the best way to talk about this to retain working compat between
SVG's concepts and the new ones I'll be writing.

First, some background.  A CSS gradient is a new value for the <image>
production in CSS.  Gradients, by their nature, paint themselves on an
infinite canvas, just like a solid color does.  However, when used in
CSS, such as in a background-image rule, the gradient is then clipped
to the size of the box.  This clipped image can then be manipulated
via background-size, background-position, etc.  (That is, given a rule
like "background: -moz-linear-gradient(left, yellow, blue) gray 50px
center no-repeat;", you can clearly see that the gradient is clipped
to a rectangular region and shifted by 50px to the right, revealing a
stripe of background-color underneath it.)  However, I am adding the
'extend' value to background-repeat which changes this behavior, and
stops the clipping.  (In the example given, if
background-repeat:extend; was specified, you wouldn't see any gray;
the yellow that started the gradient would continue to extend
leftwards, filling that 50px stripe.)

I'd like to define all of this in a generic way that can be hooked
into by later additions, and by SVG.  Fantasai brought up that this
could be useful to allow an SVG image to 'overflow' its

I believe, then, that it would be best to define this in terms of
viewport coordinate spaces.  I need some term to refer to 'the box
comprising 0%-100% height and width, in the given coordinate space' to
start with - this will be the box that gradients are sized and
positioned relative to and clipped to by default.  Is there an
existing term in SVG for this?

Received on Thursday, 25 March 2010 00:01:14 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Thursday, 25 March 2010 00:01:17 GMT