W3C home > Mailing lists > Public > www-style@w3.org > October 2012

Re: [css-masking] new value for 'mask-clip'

From: Dirk Schulze <dschulze@adobe.com>
Date: Fri, 26 Oct 2012 01:19:51 -0700
To: "robert@ocallahan.org" <robert@ocallahan.org>
CC: "www-style@w3.org list" <www-style@w3.org>
Message-ID: <737ABB42-96EC-4E37-ABE5-ED66ED559E76@adobe.com>

On Oct 26, 2012, at 6:32 AM, Robert O'Callahan <robert@ocallahan.org> wrote:

> On Thu, Oct 25, 2012 at 11:04 AM, Dirk Schulze <dschulze@adobe.com> wrote:
> On Oct 24, 2012, at 2:47 PM, "Robert O'Callahan" <robert@ocallahan.org> wrote:
> 
>> On Thu, Oct 25, 2012 at 10:40 AM, Dirk Schulze <dschulze@adobe.com> wrote:
>> Relative values on SVG for example:
>> 
>> <svg width="100%" height="100%">
>> ...
>> 
>> Which is very common on SVG, since these are the default values.
>> 
>> Aren't those resolved relative to the background painting area, not the background clip area?
> That would make sense for backgrounds, since a background can't overflow. It would not be the desired way for masking, since it means you always clip overflowing content with an SVG file. Something that I would like to avoid.
> 
> That's only a problem if the <svg> itself is used as a mask, right? Which I don't think you can even do. A <mask> element, used as a mask, would not be clipped by any clipping on its <svg> ancestor.
> 
> Maybe I'm just confused. It would help if you gave a concrete example.

A short example:

<style>
#container {
	width: 200px;
	height: 200px;
	mask-image: url(mask.svg);
}
</style>
<div id="container">
	<img src="image.png" width="500">
</div>

Clearly the image does overflow the container. We apply a mask to the container, which is an SVG image:

<svg xmlns="http://www.w3.org/2000/svg">
	<ellipse cx="50%" cy="50%" rx="50%" ry="50%"/>
</svg>

The ellipse defined by this image would clip on the border box of the container. In absolute coordinates: cx=100, cy=100, rx=100, ry=100. Even with a value 'mask-clip: none', the ellipse would be the size of the container and clip to the border box of the container. But in the case above, you may want the ellipse mask the the whole group and not just the container. But there is no keyword in 'mask-clip' that would allow you using this intrinsic size.

Greetings,
Dirk

> 
> Rob
> -- 
> “You have heard that it was said, ‘Love your neighbor and hate your enemy.’ But I tell you, love your enemies and pray for those who persecute you, that you may be children of your Father in heaven. ... If you love those who love you, what reward will you get? Are not even the tax collectors doing that? And if you greet only your own people, what are you doing more than others?" [Matthew 5:43-47]
> 
Received on Friday, 26 October 2012 08:20:20 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:21:01 GMT