3

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

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

2

1 ответ 1

2

Путь надо вставить в <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>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.