Re: [css3-transforms] Percentage values for 'transform' on pattern, linear/radialGradient, clipPath

Hi,

During the FX meeting in Hamburg we resolved that percentage values for the 'transform' property should not be ignored[1]. IIRC we did not resolve if percentage values are relative to:

* the viewport of the referencing object
* the bounding box of the referencing object
* the size of the resource (pattern/gradient/clipPath size).

I would like to avoid to use the last item since we do not have a definition for the size of clipPath.

Relative to the bounding box seems more natural to me and would be consistent with percentage values for 'transform' on the object itself.

Here is an example:

<svg width="500" height="500">
<defs>
   <clipPath transform="translate(20%, 20%)" id="clipping">
       <rect width="20" height="20"/>
   </clipPath>
</defs>

<rect width="200" height="200" fill="green" clip-path="url(#clipping)">
</svg>

Going with the first two items of the list, should the clipPath be translated by
* (100px, 100px) or
* (40px, 40px)

Greetings,
Dirk

[1] http://dev.w3.org/csswg/css3-transforms/#svg-user-coordinate-space

PS: Forgot to add links and add more clarification.


On Oct 19, 2012, at 8:50 AM, Dirk Schulze <dschulze@adobe.com> wrote:

> Hi,
> 
> During the FX meeting in Hamburg we resolved that percentage values for the 'transform' property should not be ignored. IIRC we did not resolve if percentage values are relative to:
> 
> * the user space of the referencing object
> * the bounding box of the referencing object
> * the size of the resource (pattern/gradient/clipPath size).
> 
> I would like to avoid to use the last item since we do not have a definition for the size of clipPath.
> 
> Relative to the bounding box seems more natural to me and would be consistent with percentage values for 'transform' on the object itself.
> 
> Here is an example:
> 
> <svg width="500" height="500">
> <defs>
>    <clipPath transform="translate(20%, 20%)" id="clipping">
>        <rect width="20" height="20"/>
>    </clipPath>
> </defs>
> 
> <rect width="200" height="200" fill="green" clip-path="url(#clipping)">
> </svg>
> 
> Going with the first two items of the list, should the clipPath be translated by
> * (100px, 100px) or
> * (40px, 40px)
> 
> Greetings,
> Dirk

Received on Friday, 19 October 2012 16:57:48 UTC