RE: fill and stroke properties with CSS <image> values

on: Thursday, January 23, 2014 10:39 AM
Tab Atkins Jr. writes

On Thu, Jan 23, 2014 at 6:55 AM, David Dailey <> wrote:
>> <linearGradient>
>> <stop offset="0" stop-color="url(image1)"/> <stop offset="1" 
>> stop-color=" url(image2)"/> </linearGradient>

>Gradients, while 2-dimensional, have a 1-d data model - they're colors
>(0d) painted on a line, which extend from the line perpendicularly to fill the plane.  >(Or, for radial gradients, extend from it and loop around in an ellipse.)

>As such, painting images in a gradient doesn't make much sense, since images are 2d to >start with.

>I suppose you could think of it as painting the line (and the extended
>perpendicular) with the corresponding pixels from the image blended with the given amount >of progress, but that's reaching a bit.

Well, reaching is a relative thing I suppose. That's what I had in mind. Transitions between an image which blend gradually (along a line) into a color might be more common than transitioning between N images, though a reflected gradient that has its stop-offsets animated and which paints transitions between two images would be a very nice effect. Both effects would normally be done with a mask, just as <someshape fill="image"> would normally be done with a clippath. So long as one is extending the model, why not make it transformative?


Received on Thursday, 23 January 2014 18:38:04 UTC