Добрый день уважаемые. Подскажите, пожалуйста как запускать данное свойство по лично нарисованному пути? (Почему то не выходит, хотя на простых фигурах хорошо отрабатывает) Приведу простой пример
.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>
Как "порезать" эти два изображения по тем путям которые нарисованы в svg? Буду очень благодарен, если объясните на этом примере