Я пытаюсь применить clip-path с моим файлом SVG к изображению. Я нашел пример, это именно то, что я пытаюсь сделать, но я не могу реализовать свой объект таким же образом. Также у меня есть файл svg, path который я использую, чтобы сделать что-то подобное.
img {
clip-path: url(#svgClip);
width: 300px;
height: 300px;
object-fit: cover;
display: block;
margin-right: auto;
margin-left: auto;
}
<!DOCTYPE html>
<html>
<head>
<title>HTML, CSS and JavaScript demo</title>
</head>
<body>
<img src="https://media-cdn.t24.com.tr/media/library/2021/07/1627040373809-100496736-steve-jobs-march-2011-getty.jpg" alt="Photographer in a market." />
<svg width="0" height="0">
<clipPath id="svgClip" clipPathUnits="objectBoundingBox">
<path d="M0.75815095,0.0579477769 C0.879893708,0.187288937 0.902165272,0.677587654 0.799370955,0.785996249 C0.627963035,0.966765889 0.26163708,0.91434951 0.111342491,0.755791573 C-0.0332137967,0.603287436 -0.035795248,0.382887577 0.0965066612,0.173955315 C0.200239457,0.0101396315 0.648923894,-0.0580965318 0.75815095,0.0579477769 Z"></path>
</clipPath>
</svg>
</body>
</html>
Это мой файл SVG
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1000 1000" width="500" height="500">
<defs>
<clipPath id="_clipPath_83N3rlbeDk9CuuExdeWmYg5Uk1iUKzVX">
<rect width="1000" height="1000"/></clipPath>
</defs>
<g clip-path="url(#_clipPath_83N3rlbeDk9CuuExdeWmYg5Uk1iUKzVX)">
<path d="M 112 199.809 L 636.962 125.131 C 733.54 111.392 823.103 178.647 836.842 275.226 L 911.52 800.191 L 386.558 874.869 C 289.98 888.608 200.417 821.353 186.678 724.774 L 112 199.809 Z" style="stroke:none;fill:#000000;stroke-miterlimit:10;"/>
</g>
</svg>
Когда я заменяю в примере выше в clip-path
на свой path
ничего не получается.
Как я могу правильно реализовать свой файл svg в этом примере?
Свободный перевод вопроса Clip Path SVG file от участника @phzdjz.