Good day dear. Can you please tell how to run this property on a personally drawn path? (For some reason it does not work, although it works well on simple figures) I will give a simple example

.mainBlock{ width: 180px; height: 245px; } svg{ width: 180px; } .block{ width: 180px; height: 245px; border: 1px solid #000; background: url("https://cdn.rawgit.com/BlackStar1991/Pictures-for-sharing-/ad0580ed/code.jpg?raw=true") no-repeat 50% 50%; -webkit-clip-path: url("#part1"); clip-path: url("#part1"); /// не срабатывает? } 
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 180 245" style="enable-background:new 0 0 180 245;" xml:space="preserve"> <g id="part1"> <path fill="none" stroke="#000000" stroke-miterlimit="10" d="M95.4,44l-3.1,41.9l14.5,22.4c3.9,6.1,2.7,14.1-2.9,18.7l-36,32.4l-6.9,12.7c-8.7,15.9-26.5,24.7-44.4,21.8h0 l1L12.5,85.9l25.6-44.4L19.9,21.8L95.4,44z"/> </g> <g id="part2"> <path fill="none" stroke="#000000" stroke-miterlimit="10" d="M114,93.9l48.1-31.3l8.5,80.9l-42.7,48.4l-28.8-0.8c-7.6,14.7-23.1,23.6-39.6,22.8l-29.6-1.5l49-48.1 l35.3-13.4l33-33.9L114,93.9z"/> </g> </svg> <div class="mainBlock"> <div class="block"></div> <div class="block"></div> </div>

How to "cut" these two images along the paths that are drawn in svg? I would be very grateful if you explain by this example

1 answer 1

The path must be inserted into <defs><clipPath /></defs> . Well, to preliminarily study how this property works at all (for example, here or here ), how to make ways, etc. With your current path it cuts off somehow weird.

 .mainBlock { width: 180px; height: 245px; } svg { width: 180px; } .block { width: 180px; height: 245px; border: 1px solid #000; background: url("https://cdn.rawgit.com/BlackStar1991/Pictures-for-sharing-/ad0580ed/code.jpg?raw=true") no-repeat 50% 50%; -webkit-clip-path: url("#clip"); clip-path: url("#clip"); } 
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 180 245" style="enable-background:new 0 0 180 245;" xml:space="preserve"> <defs> <clipPath id="clip"> <path fill="none" stroke="#000000" stroke-miterlimit="10" d="M95.4,44l-3.1,41.9l14.5,22.4c3.9,6.1,2.7,14.1-2.9,18.7l-36,32.4l-6.9,12.7c-8.7,15.9-26.5,24.7-44.4,21.8h0 l1L12.5,85.9l25.6-44.4L19.9,21.8L95.4,44z"/> </clipPath> </defs> <g id="part1"> <path fill="none" stroke="#000000" stroke-miterlimit="10" d="M95.4,44l-3.1,41.9l14.5,22.4c3.9,6.1,2.7,14.1-2.9,18.7l-36,32.4l-6.9,12.7c-8.7,15.9-26.5,24.7-44.4,21.8h0 l1L12.5,85.9l25.6-44.4L19.9,21.8L95.4,44z"/> </g> <g id="part2"> <path fill="none" stroke="#000000" stroke-miterlimit="10" d="M114,93.9l48.1-31.3l8.5,80.9l-42.7,48.4l-28.8-0.8c-7.6,14.7-23.1,23.6-39.6,22.8l-29.6-1.5l49-48.1 l35.3-13.4l33-33.9L114,93.9z"/> </g> </svg> <div class="mainBlock"> <div class="block"></div> <div class="block"></div> </div>