- From: Tab Atkins Jr. <jackalmage@gmail.com>
- Date: Wed, 24 Mar 2010 17:00:19 -0700
- 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 viewbox(viewport?). 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? ~TJ
Received on Thursday, 25 March 2010 00:01:14 UTC