mozilla
Your Search Results

    clip-path

    This article is in need of a technical review.

    This article is in need of an editorial review.

    Summary

    The clip-path property prevents a portion of an element from drawing by defining a clipping region. The clipping region is a path specified as an URL referencing an inline or external SVG, or shape method such as circle(). The clip-path property replaces the now deprecated clip property.

    Syntax

    clip-path: <uri> | none | inherit
    .target { clip-path: url(resources.svg#c1); }
    .anothertarget { clip-path: none; }
    .yetanothertarget { inherit; }
    

    Values

    uri
    <uri> | none | inherit

    Examples

    /* inline SVG  */
    .target { clip-path: url(#c1); }
    
    /* external SVG */
    .anothertarget { clip-path: url(resources.svg#c1); }
    
    /* circle */
    .circleClass { clip-path: circle(15px at 20px 20px); }

    Specifications

    Specification Status Comment
    CSS Masking Level 1
    The definition of 'clip-path' in that specification.
    Candidate Recommendation Extends its application to HTML Element
    Scalable Vector Graphics (SVG) 1.1 (Second Edition)
    The definition of 'clip-path' in that specification.
    Recommendation Initial definition (applies to SVG Elements only)

    Browser compatibility

    Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
    Basic support ? ? ? ? ?
    HTML elements 24 3.5 (1.9.1) ? ? ?
    Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
    Basic support ? ? ? ? ?
    HTML elements ? 1.0 (1.9.1) ? ? ?

    See also

    Document Tags and Contributors

    Last updated by: chRyNaN,
    Hide Sidebar