Как сделать SVG маску для фото?

Question

[balex777]

Привет, у меня есть svg

<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve"  width="700px" height="400px" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
viewBox="0 0 6024393 3479896"
 xmlns:xlink="http://www.w3.org/1999/xlink">
 <defs>
  <style type="text/css">
   <![CDATA[
    .fil010 {fill:red}
   ]]>
  </style>
 </defs>
 <g id="Слой_x0020_1">
  <metadata id="CorelCorpID_0Corel-Layer"/>
  <path class="fil010" d="M0 1042442c0,122122 22935,222611 46662,341254 18918,94593 36781,185178 58494,277701 161364,687644 166828,863222 891059,1151963 326208,130054 644908,253310 976544,376854 155528,57939 464453,171143 630508,214284 283664,73698 448040,111556 743330,27683 531388,-150937 1650861,-405957 2004140,-823338 44277,-52311 99873,-157707 131808,-221626 215720,-431756 374366,-876055 499360,-1340809 44279,-164652 76600,-306120 -23175,-411188 -175707,-177655 -385612,-329107 -589303,-474169 -216996,-154536 -299143,-178420 -551383,-151506 -1417969,151295 -2879185,340168 -4287275,572324 -130151,21460 -292133,52107 -373254,118107 -88621,72103 -157515,185215 -157515,342466z"/>
 </g>
</svg>

Как сделать фотку такой же формы как эта SVG? кучу способов посмотрел, не получается.

Comments

[Ankhena]

Выложите свой код в песочницу jsfiddle или codepen, чтобы было понятно что именно не получается.

Answer 1

[Максим]

https://codepen.io/topicstarter/pen/gOYwZjB вот так

Comments

[balex777]

Спасибо, вот только почему то форма не заполнятся на всю, у этой формы другие контуры, как думаете почему?

[Максим]

balex777, исправил - проверьте ссылку

[balex777]

Максим Ленский, Спасибо огромное

Answer 2

[Ankhena]

css.yoksel.ru/svg-masks