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.
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>
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.
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 */}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);}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
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>
Clipping path:
We apply SVG
img { clip-path: url(#svgPath);}Effect: live demo
Use
<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>
I set the textLength to make the width of the text consistent with the width of the image. Use the x, y coordinates in
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
<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>
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
How to turn off real-time protection in Windows Security Center
Introduction to the plug-ins required for vscode to run java
vue v-if
The specific process of connecting to wifi in win7 system
What java workflow engines are there?
The difference between ms office and wps office
vim save and exit command
Thunder vip patch
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
