css.properties.clip-path - "clip-path: url(#id)" not tested (e.g. currently does not work in Chrome or MS Edge)

What type of issue is this?

Missing compatibility data

What information was incorrect, unhelpful, or incomplete?

The compatibility tests and data does not include any info about the actual support of clip-path: url(#id) (linking to a path defined in the local document) or clip-path: url(URI#id) (linking to a path defined in an external document).

Visibly this is part of standard specifications but it currently does not work e.g. in Chrome, which just ignores the clipping as if it was invalid (note that this should work including for the root svg element, which could specify an internally defined path, such as a rectangle equal to the viewPort or smaller than it to provide inset that MUST not be drawn and must remain transparent, or any other shape)

For now such clipping is ignored, and this causes issues for various SVG files, notably for cartographic maps that are defined with elements partly defined outside of the view port (which could include "arbitrary/fuzzy" cutting segments, notably border strokes of filled shapes, that should not be rendered at all outside the clipping box). Note also that it is not evident to correctly redefine these shapes, as it requires complex calculation for the geometry of filled shapes, and even more complex computation for clipping the strokes drawn on top of these filled shapes for borders, that may use various styles with variable stroke widths and the effect of line-joins notably but not limited to miters).

The only work around for now is to use clip-path: basic-shape(...) instead of clip-path: url(...) which is more general. But this requires duplicating the geometry of this basic-shape (a rectangle, or circle/ellipse, or polygon, or path) in the document.

Can you test "clip-path: url()" (also instructing implementers to fix their engines and allowing graphic designers to find some workarounds that may also not work)?

The typical usage of clip-paths (not restricted to rectangles) is for rendering insets SVG images within another larger SVG image, and this has many uses frequently found in many documents:

• remote dependencies of a territory (the remote dependencies may be rendered in context with some parts of other areas outside its administrative borders, but these contextual parts should be clipped and not rendered outside the inset, and as well the larger map should be clipped to not be drawn on top of the inset)
• map legends or scale indicators
• mini locator maps, showing the location of the main map on a reduced simpler map of a much larger zone)
• zoomed details in technical diagrams, or in user guides...

What browsers does this problem apply to, if applicable?

Chrome, MS Eege (current releases as of 2024-04-08)

What did you expect to see?

• an addition row in the table shown in the "Browser Compatibilty" section for "url()"
• the current indications given in the row "On SVG elements" is wrong (may be this is true for SVG embedded in HTML, but for plain SVG files, this does not work at all in ANY element) and should display "partial".

Did you test this? If so, how?

Yes, in Google Chrome and MS Edge currently release versions (as of 2024-04-08).

Can you link to any release notes, bugs, pull requests, or MDN pages related to this?

No response

Do you have anything more you want to share?

No response

MDN URL

https://developer.mozilla.org/fr/docs/Web/CSS/clip-path

MDN metadata

MDN page report details

• Query: css.properties.clip-path
• Report started: 2024-04-08T18:32:45.303Z

Start with the css.properties.clip-path entry and the MDN page linked in the report. Verify local and external url(#id) behavior in the affected browsers, then update the compatibility data to cover url() and correct the SVG indication; the repository’s validation checks should pass when the data is complete.