Свойство clip-path через свой path

309

01 марта 2017, 20:31

Добрый день уважаемые. Подскажите, пожалуйста как запускать данное свойство по лично нарисованному пути? (Почему то не выходит, хотя на простых фигурах хорошо отрабатывает) Приведу простой пример

.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? Буду очень благодарен, если объясните на этом примере

Answer 1

Путь надо вставить в <defs><clipPath /></defs>. Ну и предварительно изучить как это свойство вообще работает (например, тут или тут), как надо пути составлять и т. д. С вашим текущим путем обрезает как-то странновато.

.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>