K
I sold clippath and mask, but it doesn't work. Tell me not.
How do I do it, or how do I do it? clipPathImagine that you have a sheet with a picture, you put a template on it and cut a knife through the template. It's all too much to throw away and use only the cut out of the picture.That's how it works. clippath♪ The SVG figure is a template. <clipPath id="clip-ff" clipPathUnits="objectBoundingBox">
<polygon points="0.2, 0.1 0.7,0.2 1,1 0,1.8"></polygon>
</clipPath>
Then you refer to the image from which you cut the figure. <image xlink:href="http://placeimg.com/300/400/any" clip-path="url(#clip-ff)" width="400" height="400"> </image>
Please note that SVG <clipPath> used here as CSS properties clip-path="url(#clip-ff)" <html>
<div id="container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400" viewBox="0 0 400 400" >
<defs>
<clipPath id="clip-ff" clipPathUnits="objectBoundingBox">
<polygon points="0.2, 0.1 0.7,0.2 1,1 0,1.8"></polygon>
</clipPath>
</defs>
<image xlink:href="http://placeimg.com/300/400/any" clip-path="url(#clip-ff)" width="400" height="400"> </image>
</svg>
</div>
</html>UPD 26.11.2017 Example of SVG clipPath for the web site .banner_1 {
min-height: 100px;
background-color: #41dddb;
}
.banner_2 {
background:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/hawaii-beach.jpg);
background-size:cover;
}<div class="banner_1">
</div>
<div class="banner_2">
<svg viewBox="0 0 500 500" preserveAspectRatio="xMinYMin meet">
<defs>
<clipPath id="svgPath" >
<path d="M0,20 C100,80 350,0 500,30 L500,00 L0,0 Z" style="stroke: none; fill:red;"/>
</clipPath>
</defs>
<rect width="100%" height="100%" fill="#41dddb" clip-path="url(#svgPath)"
</svg>
</div>maskThe principle of action here is different from that of clipPath♪ The mask is a trafar through which you look at the drawing, what you see through the trafaret will be placed on the screen. Any svg figure may act as a trafarite: rect♪ polygon♪ polyline♪ circle♪ ellipse♪ pathor their combination. before its application They're always hiding. Section <defs> <defs>
<mask id="cat"/>
<path d="m43 60.9-20.2 ..../>
</mask>
</defs>
The mask is then applied to the vegetation: <image x="-50" y="0" width="250" height="250"
xlink:href="http://placeimg.com/300/400/any"
mask="url(#cat)">
</image>
The code, the use of the mask:<html>
<div class="container">
<svg version="1.1"
baseProfile="full"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="400" height="400" viewBox="0 0 250 250">
<defs>
<mask id="cat">
<g transform="scale(2)" >
<path d="m43 60.9-20.2 0C17.5 61 16.7 60.6 14 56.3L3.9 38.1C1.6 33 1.5 32.9 4 28.5L14.8 10c0 0 1.3-2.4 2.6-3.1 1.4-0.8 4.6-0.7 4.6-0.7l21.1 0.1c6.1-0.1 5.5 0.7 8.1 4.4L61.6 28.6c1.9 4.3 2.5 4.8 0.4 9.3L51.9 55.7C49.5 61 48.5 60.9 43 60.9Z"
style="fill:white;stroke-width:1;stroke:white"/>
</g>
</mask>
</defs>
<image x="-50" y="0" width="250" height="250"
xlink:href="http://placeimg.com/300/400/any"
mask="url(#cat)">
</image>
</svg>
</div>
</html> Call attention.that you must ask for the colour of the mask: style="fill:white;stroke-width:1;stroke:white"
White is full transparency, black - mask is not transparent. Other colours will work as properties opacity♪ For example, the gray colour gives a half transparency. Combined maskIt consists of two SVG figures: rectangle (rect) with a colour different from
white and black, and that's why we get a semi-transparent background. path - a white-coloured sixangle - complete
A transparent area. Clothingstroke() A six-angle shade of gray. <div class="container">
<svg version="1.1"
baseProfile="full"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="400" height="400" viewBox="0 0 250 250">
<defs>
<mask id="cat">
<rect width="200" height="200" fill="darkslateblue"/>
<g transform="scale(2)" >
<path d="m43 60.9-20.2 0C17.5 61 16.7 60.6 14 56.3L3.9 38.1C1.6 33 1.5 32.9 4 28.5L14.8 10c0 0 1.3-2.4 2.6-3.1 1.4-0.8 4.6-0.7 4.6-0.7l21.1 0.1c6.1-0.1 5.5 0.7 8.1 4.4L61.6 28.6c1.9 4.3 2.5 4.8 0.4 9.3L51.9 55.7C49.5 61 48.5 60.9 43 60.9Z"
style="fill:white;stroke-width:4;stroke:#AFACAA"/>
</g>
</mask>
</defs>
<image x="-50" y="0" width="250" height="250"
xlink:href="http://placeimg.com/300/400/any"
mask="url(#cat)">
</image>
</svg>
</div>
</html> In more detail, with examples, https://ru.stackoverflow.com/q/919186/28748