W3C home > Mailing lists > Public > www-svg@w3.org > January 2010

Re: Fwd: Question on gradient userSpaceOnUse

From: Cyril Concolato <cyril.concolato@enst.fr>
Date: Tue, 05 Jan 2010 14:15:09 +0100
Message-ID: <4B433B5D.10605@enst.fr>
To: Alex Danilo <alex@abbra.com>
CC: Ken Stacey <ken@svgmaker.com>, www-svg@w3.org
Hi all,

For your information in GPAC, we have the same results as Firefox, Batik, or WebKit.

I've also made a modified test (attached). In this example, the first rectangle (without transform="scale(0.25,1)") is rendered the same in all platforms tested: GPAC, Firefox, Webkit and Opera. The second and third are not. The fourth and fifth are.

You can see here that in the first rectangle, the gradient is indeed perpendicular to the gradient vector. The difference between viewers appears when applying the scale transform. There are two options:
A. Some use the transform attribute to compute the x1,y1,x2,y2 values to compute the gradient and then ignore the transform attribute.
B. Some others only use the x1,y1,x2,y2 values to compute the gradient and then apply the transform attribute on the result.

The question is: Should the transform attribute be applicable to the whole gradient or to the key points of the gradient?

To check, I replaced the scale with a rotation in example 4 and 5. As indicated, all platforms render the same result.

So, I think the transform attribute should apply to the whole gradient (Option B) for consistency with rotations and the rest of SVG rendering model (there is no other example when rotate and scale behave differently).

However, it may be more efficient to apply scaling only to the key points (e.g. on mobile devices) so maybe adding the transformBehavior attribute (like the video element) would be a solution.

Cyril




Le 05/01/2010 13:20, Alex Danilo a écrit :
> Hi Ken,
>
> --Original Message--:
>> I agree with Dirk, the gradient should be perpendicular in user space.
>>
>> Below is Jeff and Erik's examples extended further to show a
>> perpendicular line in user space.
>
> Cool example, thanks!
>
>> Ken Stacey
>>
>> <?xml version="1.0"?>
>> <svg xmlns="http://www.w3.org/2000/svg"
>>       xmlns:xlink="http://www.w3.org/1999/xlink">
>>    <defs>
>>      <linearGradient id="g1" x1="0" y1="0" x2="400" y2="50"
>> gradientUnits="userSpaceOnUse">
>>        <stop offset="0" stop-color="red"/>
>>        <stop offset="0.5" stop-color="green"/>
>>        <stop offset="1.0" stop-color="blue"/>
>>      </linearGradient>
>>      <linearGradient id="g2" x1="0" y1="0" x2="100" y2="50"
>> gradientUnits="userSpaceOnUse">
>>        <stop offset="0" stop-color="red"/>
>>        <stop offset="0.5" stop-color="green"/>
>>        <stop offset="1.0" stop-color="blue"/>
>>      </linearGradient>
>>    </defs>
>>
>>    <g transform="translate(100,100)">
>>      <g transform="scale(0.25,1)">
>>        <rect width="400" height="50" fill="url(#g1)" />
>>        <!-- show the gradient vector in current user space -->
>>        <line x1="0" y1="0" x2="400" y2="50" stroke="black"/>
>>        <!-- show the perpendicular vector in current user space -->
>>        <line x1="0" y1="0" x2="400" y2="50" stroke="black"
>> transform="translate(200,25) rotate(-90)"/>
>>      </g>
>> 	</g>
>>    <g transform="translate(100,200)">
>>      <rect width="100" height="50" fill="url(#g2)" />
>>      <!-- show the gradient vector in current user space -->
>>      <line x1="0" y1="0" x2="100" y2="50" stroke="black"/>
>>        <!-- show the perpendicular vector in current user space -->
>>      <line x1="0" y1="0" x2="100" y2="50" stroke="black"
>> transform="translate(50,25) rotate(-90)"/>
>>    </g>
>> </svg>
>
> Looking at the results of this test it seems that some
> implementations take the perpendicular from device space,
> and some from user space with differing results.
>
> So it looks like the WG need to decide what the expected
> behaviour is, and add a test to verify that.
>
> Alex
>
>


-- 
Cyril Concolato
Maître de Conférences/Associate Professor
Groupe Mutimedia/Multimedia Group
Telecom ParisTech
46 rue Barrault
75 013 Paris, France
http://concolato.blog.telecom-paristech.fr/


gradientsUSoU.svg
(image/svg-xml attachment: gradientsUSoU.svg)

Received on Tuesday, 5 January 2010 13:15:38 GMT

This archive was generated by hypermail 2.3.1 : Friday, 8 March 2013 15:54:44 GMT