(翻译)Clipping in CSS and SVG ? The clip-path Property and <clipPath> Element_html/css

CSS and SVG are similar in many ways. Today, many parts of our CSS come from SVG, one of which is the clipping operation. Both css and svg allow us to clip elements to change them into specific irregular shapes.

Please note that the examples in this article may not work on your browser. So please check this compatibility report.

What Is Clipping?

Clipping is an operation that allows you to completely or partially hide an element's image. The element being clipped can be any container or image element. The displayed or hidden part of the element is determined by the clipping path.

For example, effect

svg file

<?xml version="1.0" encoding="utf-8"?><!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  --><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" style="background-color: white;"     width="1500px" height="800px" viewBox="0 0 1500 400" enable-background="new 0 0 1500 800" xml:space="preserve"><image overflow="visible" width="800" height="500" xlink:href="your image" transform="matrix(0.5532 0 0 0.5532 56.1025 62.7842)"></image><g>    <defs>        <path id="SVGID_1_" d="M1167.578,93.518c23.562-5.852,53.741-8.445,53.741-8.445s62.447-5.133,77.539,2.303            c36.88,18.17,83.217,61.54,101.34,81.379c19.146,20.961,22.49,58.347,17.657,79.559c-8.793,38.584-104.193,61.551-143.38,67.075            c-41.948,5.916-159.901-0.019-191.348-28.405c-21.392-19.311-9.722-104.656-0.767-132.048            C1095.412,115.014,1144.917,99.146,1167.578,93.518z"/>    </defs>    <clipPath id="SVGID_2_">        <use xlink:href="#SVGID_1_"  overflow="visible"/>    </clipPath>    <g clip-path="url(#SVGID_2_)">        <defs>            <rect id="SVGID_3_" x="1019" y="62" width="441" height="276"/>        </defs>        <clipPath id="SVGID_4_">            <use xlink:href="#SVGID_3_"  overflow="visible"/>        </clipPath>        <g transform="matrix(1 0 0 1 0 -3.814697e-006)" clip-path="url(#SVGID_4_)">                            <image overflow="visible" width="800" height="500" xlink:href="your image" transform="matrix(0.5519 0 0 0.5519 1019.1992 61.7114)">            </image>        </g>    </g></g><g>    <path fill="none" stroke="#000000" stroke-width="1.7043" stroke-miterlimit="10" stroke-dasharray="8.5114,8.5114" d="        M692.578,94.518c23.562-5.852,53.741-8.445,53.741-8.445s62.447-5.133,77.539,2.303c36.88,18.171,83.217,61.54,101.34,81.379        c19.146,20.961,22.49,58.348,17.657,79.56c-8.793,38.584-104.193,61.551-143.38,67.075c-41.948,5.916-159.901-0.019-191.348-28.405        c-21.392-19.311-9.722-104.656-0.767-132.048C620.412,116.014,669.917,100.146,692.578,94.518z"/></g><g id="layer1" transform="translate(-166.9787,-302.08511)">    <path id="path3009" d="M961.748,396.576c2.535-0.148,4.486-2.119,4.352-4.407c-0.133-2.287-2.299-4.016-4.836-3.867l-3.251,0.127        c-2.903,0.171-5.362-0.773-5.827-2.162c-0.082-0.266-0.063-0.519-0.045-0.791c0.297-1.433,2.631-2.656,5.535-2.827l3.243-0.252        c2.536-0.148,4.487-2.119,4.352-4.406c-0.133-2.288-2.299-4.016-4.837-3.868c-2.534,0.149-4.472,2.119-4.339,4.405        c0.063,1.035,0.535,1.956,1.271,2.64c-3.787,0.26-7.001,1.457-8.549,3.016l-16.073-5.058c-4.482-0.77-5.166,1.773-5.31,1.996        L944,386.349l-15.844,7.123c0.171,0.204,1.145,2.649,5.508,1.362l15.373-6.895c1.72,1.367,5.049,2.181,8.841,1.997        c-0.651,0.766-1.014,1.735-0.953,2.771C957.057,394.994,959.212,396.724,961.748,396.576z M961.73,395.4        c-1.79,0.105-3.318-1.231-3.409-2.775c-0.091-1.543,0.987-3.218,2.779-3.322c1.792-0.105,3.613,1.4,3.704,2.943        C964.893,393.789,963.52,395.295,961.73,395.4z M960.64,381.423c-1.792,0.104-3.06-1.433-3.15-2.977        c-0.088-1.542,1.272-3.048,3.063-3.152c1.791-0.105,3.33,1.229,3.422,2.774C964.065,379.611,962.43,381.318,960.64,381.423        L960.64,381.423z"/></g><text transform="matrix(1 0 0 1 222.7568 432.0273)" font-family="'Angelina'" font-size="40">Object</text><text transform="matrix(1 0 0 1 701.3027 432.0273)" font-family="'Angelina'" font-size="40">Clipping Path</text><text transform="matrix(1 0 0 1 1151.085 432.0273)" font-family="'Angelina'" font-size="40">Clipped Object</text><text transform="matrix(1 0 0 1 517.3511 237.4595)" font-family="'LaoUI'" font-size="80">+</text><text transform="matrix(1 0 0 1 978.2168 237.4595)" font-family="'LaoUI'" font-size="80">=</text></svg>

Copy after login

Note, you need to change it yourself The path to the image can be used. The original path was base64, which was too long, so I deleted it.

clipping path defines an area, and images within this area will be displayed, while images outside will not be displayed. This area is called the clipping region.

More precisely, any part of the element outside this area will not be rendered, including content, background, borders, text decoration, outline and the visible scrolling mechanism used by the clipping path.

These things will not be rendered in descendant elements either.

Clipping In CSS ? The clip-path Property

clip-path is part of the CSS Masking Module, and the clipping operation has been part of svg since 2000. And the clipping operation has been incorporated into the css mask module, so that when we clip html elements, it is the same as svg elements.

The clip-path attribute is used to specify the clipping path that will be applied to the element. With clip-path, you can specify the attribute value of the path in SVG .

You can also limit the trimming path by specifying basic shapes (basic shapes) in the CSS Shapes module.

These shapes can be created using shape functions, such as polygon(), circle(), inset(), ellipse()

Use clip-path to trim the path Acting on elements is very simple and straightforward.

/* Referencing an SVG clipPath */.element {    clip-path: url(#svgClipPathID);} /* Using a CSS basic shape function */.element {    clip-path: polygon(...); /* or one of the other shape functions */}

Copy after login

For example, we use polygon() to limit the trimming path of the polygon, and then apply it to the image. The code is as follows:

img {    clip-path: polygon(626px 463px,765px 236px,687px 31px,271px 100px,70px 10px,49px 250px,133px 406px,374px 462px,529px 393px);}

Copy after login

Effect: live demo

Basic shape functions only allow us to create a limited number of shapes. The most complex ones are polygons.

If you want to create more complex shapes, you can use the SVG element. SVG allows you to create any arbitrary shape and then use it as a clipping path.

For example:

<svg height="0" width="0">    <defs>        <clipPath id="svgPath">            <path fill="#FFFFFF" stroke="#000000" stroke-width="1.5794" stroke-miterlimit="10" d="M215,100.3c97.8-32.6,90.5-71.9,336-77.6        c92.4-2.1,98.1,81.6,121.8,116.4c101.7,149.9,53.5,155.9,14.7,178c-96.4,54.9,5.4,269-257,115.1c-57-33.5-203,46.3-263.7,20.1        c-33.5-14.5-132.5-45.5-95-111.1C125.9,246.6,98.6,139.1,215,100.3z"/>        </clipPath>    </defs></svg>

Copy after login

Clipping path:

We apply SVG to the image

img {    clip-path: url(#svgPath);}

Copy after login

Effect: live demo

can contain any number of basic shapes (, , or even .

Use as the clipping path in . The best thing is that you can specify the font-family in text.

<svg height="0" width="0">    <defs>        <clipPath id="svgTextPath">            <text x="0" y="300" textLength="800px" lengthAdjust="spacing" font-family="Vollkorn" font-size="230px" font-weight="700" font-style="italic"> Blossom </text>        </clipPath>    </defs></svg>

Copy after login

I set the textLength to make the width of the text consistent with the width of the image. Use the x, y coordinates in to position it.

Note that the x and y coordinates here are based on the lower left corner of the text as the origin.

Effect: live demo

Below, I make contain multiple basic shapes.

<svg height="0" width="0">    <defs>        <clipPath id="svgPath">            <circle stroke="#000000" stroke-miterlimit="10" cx="50" cy="50" r="40" />            <circle stroke="#000000" stroke-miterlimit="10" cx="193.949" cy="235" r="74.576"/>            <circle stroke="#000000" stroke-miterlimit="10" cx="426.576" cy="108.305" r="47.034"/>            <circle stroke="#000000" stroke-miterlimit="10" cx="346.915" cy="255.763" r="43.644"/>            <circle stroke="#000000" stroke-miterlimit="10" cx="255.39" cy="82.882" r="35.17"/>            <!-- more circles... -->        </clipPath>    </defs></svg>

Copy after login

Effect: live demo

(End)

If you are familiar with flash, you will know that, This is the mask in flash.

The switching effect of the pictures in the dynamic album in QQ space uses masks.

The switching effect is simply quite dazzling, and there are many changes. There are 21 kinds of effects in QQ space.

I just put a so-called mask, and everyone will understand it instantly.

This is obviously much simpler and easier to do than using the js animation library.

The above-mentioned use of svg to create irregular masks provides a new idea. You can dynamically change svg and its parameters to achieve similar animation effects.

In addition, HTML5 canvas also has a similar effect. I used a very good HTML5 library easel js.

Nima, his official website is often unavailable, but it can be found on github https://github.com/CreateJS/EaselJS

Effect