Re: Mask property syntax and CSS <image>


On Aug 5, 2012, at 9:44 PM, Rik Cabanier <cabanier@gmail.com> wrote:

> Isn't the new mask used as follows:
> <rect id ="r_1...>
> <rect mask="element(#r_1)">
> or as CSS (?):
> <rect id ="r_1...>
> <rect style = "mask: element(#r_1);">

That is what I wanted to say. It is a misunderstanding on your side.

First, it doesn't matter if you use mask="" or style="mask: ". The only difference is on the order of overriding.

The actual use case is the following:

<rect mask="select(<2ndMask>)">
 <mask>
  <rect fill="white"/>
 </mask>
 <mask>
  <circle fill="white"/>
 </mask>
</rect>

select() selects one of the possible child elements that are of type mask and which you want to use for masking. And before you ask why not referencing by URI: The idea was to avoid getElementById calls.

You point to another use case, which is valid as well, and shouldn't be hard to support.

Greetings,
Dirk

> 
> If so, I think it's compatible with the css4 element() notation.
> In fact, I think we want the exact same wording and behavior as that element. (Including the wording on compositing over a transparent backdrop)
> 
> Rik
> 
> On Sun, Aug 5, 2012 at 9:01 PM, Dirk Schulze <dschulze@adobe.com> wrote:
> 
> On Aug 5, 2012, at 8:52 PM, Rik Cabanier <cabanier@gmail.com> wrote:
> 
> >
> >
> > On Sun, Aug 5, 2012 at 7:25 PM, Brian Birtles <bbirtles@mozilla.com> wrote:
> > Hi,
> >
> > I'm just following up on some concerns with recent changes to SVG mask syntax.[1]
> >
> > Firstly, it looks like we'll replace the element() syntax with select() to avoid clashes with CSS Images.[2]
> >
> > Why? It seems like we want the exact same functionality.
> >
> I might be wrong, but I think we wanted to use element() to select a child mask element. In this case it is a selection, while element() creates a buffer and draws the referenced content in it. Of course it can be useful as a mask as well. And when we support the Image element (like Brian suggests), it is also possible to use element(). But the functionality differs from the actual use case we had in mind: selecting a mask element for masking.
> 
> Greetings,
> Dirk
> 
> >
> > Secondly, ideally we'd like to make the mask property take a CSS <image> value. However, that introduces the issue of how to differentiate between the following:
> >
> >   mask: url(#maskElem); // Existing usage. Process as an SVG <mask>.
> >   mask: url(#imgElem);  // Valid CSS <image>.
> >
> > Ideally we'd like to be able to differentiate between special SVG mask element behaviour and regular CSS <image> processing at the parser level.
> >
> > Some <image> values are easy, e.g. image(), element(), linear-gradient() etc. we can just treat as images (if nested <url> components refer to masks too bad?)
> >
> > For url() values, we could use the presence of a #hash-reference to branch?
> >
> >   mask: url(abc.png); // Treat as image
> >   mask: url(abc.svg); // Treat as image (-webkit-mask does this)
> >   mask: url(#elem);        // SVG mask processing
> >   mask: url(abc.svg#elem); // SVG mask processing
> >
> > I think you need to use image() if you want to use media fragment identifiers so we'd be ok there?
> >
> > Also, what about url(#imgElem)? Is that valid? To refer to arbitrary HTML content and apply usual CSS <image> processing?
> >
> > Once you hit the SVG mask processing branch I think we want to do target-specific processing (i.e. <mask> behaves differently to <linearGradient> behaves differently to <circle>) but maybe that's ok?
> >
> > Note that one implication of branching on # is that 'url(abc.svg)' will be treated the same as 'url(abc.png)', i.e. will get treated as an alpha mask. We won't be able to implement the 'vectors are luminance, rasters are alpha' strategy floated on www-svg recently.[3] It probably pushes us more towards 'default is alpha everywhere except <mask>' so you get consistent behaviour between:
> >
> >   mask: url(circle.svg); // alpha
> >   mask: url(#circleElem); // alpha
> >
> > and, likewise,
> >
> >   mask: linear-gradient(...); // -webkit-mask makes this alpha
> >   mask: url(#gradientElem); // alpha
> >
> > Can anyone help?
> >
> > Thanks!
> >
> > Best regards,
> >
> > Brian Birtles
> >
> > [1] https://svgwg.org/svg2-draft/masking.html#mask-property

> > [2] http://dev.w3.org/csswg/css4-images/

> > [3] http://lists.w3.org/Archives/Public/www-svg/2012Jul/0134.html

> >
> >
> 
>

Received on Monday, 6 August 2012 05:11:14 UTC