Re: 'clip' property and the behavior on 'auto'

Hi Robert,

On Oct 11, 2012, at 2:42 AM, Robert Longson <longsonr@gmail.com> wrote:

> Dirk,
> 
> Firefox implements CSS 2.1 clipping for both SVG and HTML content.
> 
> In CSS 2.1 it says 
> 
> 'auto' The element does not clip.
SVG is precisely on how to use 'auto'. I don't think that "Firefox implements CSS 2.1" means that SVG can't override the definition. That is why I ask if we can remove this clarification for SVG elements.

> 
> If you want clipping you need an overflow value other than visible (This value indicates that content is not clipped per CSS 2.1) and you want the svg width/height to be larger than the clip region to see clipping occur.
'overflow' with 'visible' says:

"This value indicates that content is not clipped, i.e., it may be rendered outside the block box."

It could be interpret that this is a general statement. I would just interpret that it is not clipped by the 'overflow' property. After all Firefox allows clipping with 'clip-path', so this seems not to be the reason:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="500" height="500">
<defs>
<clipPath id="clip">
	<rect width="200" height="200"/>
</clipPath>
</defs>
<rect width="500" height="500" fill="green"/>

<svg width="200" height="200" overflow="visible" clip-path="url(#clip)">
<rect width="500" height="500" fill="blue"/>
</svg>
</svg>


The only sentence in the  'clip' description that I can find to 'overflow' and 'visible' is:

"The element's ancestors may also clip portions of their content (e.g., via their own 'clip' property and/or if their 'overflow' property is not 'visible'); what is rendered is the cumulative intersection."

It is just talking about the ancestor element. My example had 'overflow: visible' and 'clip: auto' (and clip: rect()) on the same SVG element.

Greetings,
Dirk

PS: I added the 'clip' property to CSS Masking. For now it is just copied from CSS 2.1.[1]

[1] http://dvcs.w3.org/hg/FXTF/raw-file/tip/masking/index.html#clip-property

> 
> This clips on Firefox for instance.
> 
> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="500" height="500">
>   <rect width="500" height="500" fill="red"/>
>     <svg width="500" height="500" clip="rect(0,200px,200px,0)" >
>       <rect width="500" height="500" fill="green" />
>     </svg>
> </svg>
> 
> Best regards
> 
> Robert
>

Received on Thursday, 11 October 2012 14:05:18 UTC