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

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

Ответ

Путь надо вставить в . Ну и предварительно изучить как это свойство вообще работает (например, тут или тут), как надо пути составлять и т. д. С вашим текущим путем обрезает как-то странновато.
.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"); }