Summary: Currently clip-path clipping requires a reference to an SVG <clipPath> element which can be cumbersome for authors. We intend to allow clip-path to specify basic shapes (circle, ellipse, polygon) inline, for example:
style="clip-path: polygon(20% 50px, 200px 25%, 200px 150px, 20% 75%)" Bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1247229 Spec links: https://drafts.fxtf.org/css-masking-1/#the-clip-path https://drafts.csswg.org/css-shapes-2/#typedef-basic-shape https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes Status in other browsers: Chrome and Safari have supported basic shapes for at least a couple of years (using the '-webkit-clip-path' property). Live demo (animates between yellow star and red heart): http://codepen.io/thebabydino/pen/RWvaZW Note: the pref to enable this feature has only just been flipped on mozilla-inbound so if you test with Nightly instead of your own build you'll need to flip the pref layout.css.clip-path-shapes.enabled to true yourself. Jonathan _______________________________________________ dev-platform mailing list dev-platform@lists.mozilla.org https://lists.mozilla.org/listinfo/dev-platform
