Залить фигуру SVG фотографией

Question

Фот есть такая SVG фигура, но в ней нет картинки получается только черный фон.

 <svg 
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink"
 width="387px" height="345px">
<path fill-rule="evenodd"  fill="rgb(0, 0, 0)"
 d="M161.274,11.653 C284.691,-58.441 387.000,207.816 387.000,287.027 C387.000,366.237 248.739,246.359 101.691,329.480 C-13.835,394.783 -17.026,224.521 23.776,148.193 C61.106,78.357 92.468,50.731 161.274,11.653 Z"/>
</svg>

Нужно сделать по макету вот так

Как это сделать?

Answer 1

 <svg 
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink"
 width="387px" height="345px">
<defs>
  <clipPath id="cp">
<path fill="rgb(0, 0, 0)"
 d="M161.274,11.653 C284.691,-58.441 387.000,207.816 387.000,287.027 C387.000,366.237 248.739,246.359 101.691,329.480 C-13.835,394.783 -17.026,224.521 23.776,148.193 C61.106,78.357 92.468,50.731 161.274,11.653 Z"/>
  </clipPath>
   </defs>
   <image x="0" y="0" width="100%" height="100%" href="https://avatars.mds.yandex.net/get-zen_doc/1066925/pub_5e13877abd639600b1328fc3_5e1387ec5d636200b1860db9/scale_1200" clip-path="url(#cp)" preserveAspectRatio="none"/>
</svg>

БЛОГ НА HUSL

Залить фигуру SVG фотографией

Ответы (1 шт):