This is an archived snapshot of W3C's public bugzilla bug tracker, decommissioned in April 2019. Please see the home page for more details.

Bug 25406 - Use regular <group>, <path>, etc for ClipPath or Mask
Summary: Use regular <group>, <path>, etc for ClipPath or Mask
Status: NEW
Alias: None
Product: SVG
Classification: Unclassified
Component: Clipping (show other bugs)
Version: SVG 2.0
Hardware: PC All
: P2 normal
Target Milestone: Test Suite
Assignee: Doug Schepers
QA Contact: SVG Public List
URL:
Whiteboard:
Keywords:
Depends on:
Blocks:
 
Reported: 2014-04-21 18:47 UTC by Wray Bowling
Modified: 2014-04-21 19:34 UTC (History)
1 user (show)

See Also:


Attachments
photoshop's clipping mask (40.36 KB, image/png)
2014-04-21 18:47 UTC, Wray Bowling
Details

Description Wray Bowling 2014-04-21 18:47:29 UTC
Created attachment 1471 [details]
photoshop's clipping mask

For SVG 2.0 I think it would be beneficial to drop the <mask> and <clipPath> tags. It seems silly that both of the tags have very similar functions and attributes yet mask="url(#...)" MUST point to a <mask> and clip-path="url(#...) MUST point to a <clipPath>. The fact along that these can't be interchangeable is evidence enough that it could be improved.

Instead, I propose we allow clip-path and mask attributes to point to regular elements.
- If the clip-path'd element is inside <defs> then it doesn't render to the page.
- Else it's outside of <defs> and it does render to the page.

The latter case, which would be new functionality is implemented fairly well.


For example, compare this pseudo-code of an eye with the attached image.

<path id="sclera" d="..." style="stroke-width:2; fill:tan; stroke:#c96;"/>
<path id="pupil"  d="..." style="stroke-width:20; fill:#000; stroke:#09c;" clip-path="url(#sclera)"/>
Comment 1 Wray Bowling 2014-04-21 19:00:28 UTC
Sorry but I meant to write "The latter case, which would be new functionality is implemented fairly well" ...in applications such as Photoshop and Sketch.
Comment 2 Dirk Schulze 2014-04-21 19:34:33 UTC
(In reply to Wray Bowling from comment #0)
> Created attachment 1471 [details]
> photoshop's clipping mask
> 
> For SVG 2.0 I think it would be beneficial to drop the <mask> and <clipPath>
> tags. It seems silly that both of the tags have very similar functions and
> attributes yet mask="url(#...)" MUST point to a <mask> and
> clip-path="url(#...) MUST point to a <clipPath>. The fact along that these
> can't be interchangeable is evidence enough that it could be improved.
> 
> Instead, I propose we allow clip-path and mask attributes to point to
> regular elements.
> - If the clip-path'd element is inside <defs> then it doesn't render to the
> page.
> - Else it's outside of <defs> and it does render to the page.
> 
> The latter case, which would be new functionality is implemented fairly well.
> 
> 
> For example, compare this pseudo-code of an eye with the attached image.
> 
> <path id="sclera" d="..." style="stroke-width:2; fill:tan; stroke:#c96;"/>
> <path id="pupil"  d="..." style="stroke-width:20; fill:#000; stroke:#09c;"
> clip-path="url(#sclera)"/>

There is definitely a difference between masking and clipping in general. We definitely should keep both operations.

You ask for referencing an element or group of elements directly instead of having the <mask> and <clipPath> elements.

First of all, the new CSS Masking specification[1] will allow referencing arbitrary elements with the element() function for the 'mask' property. The referenced element will then be used as mask image.

However, element() is not going to replace <mask>. <mask> allows to specify the masking operation (alpha or luminance masking) and to clip the reference element to a certain size. With maskUnits and maskContentUnits authors have much more control over the masked image than simply by referencing it.

'clip-path' has new basic shapes that can be used directly instead of referencing elements at all.

Last but not least we need to recognize the massive usage of masking an clipping with the <mask> and <clipPath> element. All operations are exclusively done with these two elements. Dropping at this point is simply not possible.

[1] http://dev.w3.org/fxtf/css-masking-1/