如何将 svg 形状屏蔽为 svg 图像

Question

So basically I have a triangular shape and I want to mask it in an image/gif.

 <svg width="209" height="143" viewBox="0 0 209 143" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M104.5 0L0.143921 142.5H208.856L104.5 0ZM104.5 10.1551L11.9747 136.5H197.025L104.5 10.1551Z" fill="black"/> </svg> <div class="clipSvg2"> <svg viewBox="0 0 300 300" fill="none" xmlns="http://www.w3.org/2000/svg"> <defs> <mask id="mask11"> <!-- <svg width="209" height="143" viewBox="0 0 209 143" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M104.5 0L0.143921 142.5H208.856L104.5 0ZM104.5 10.1551L11.9747 136.5H197.025L104.5 10.1551Z" fill="black"/> </svg> --> </mask> </defs> //Here add some mask=url(#mask11) <image width="100%" height="100%" xlink:href="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQU69UnQwUGs3VTS51AEM2MRTHED0PRl0rMLVw3hdS_95xNdTPqY5_7E3N-pzgp49lrdkY&usqp=CAU"></image> </svg> </div>

As you see I'm trying to mask the mask11 in my image but I can't do that..I've search a lot here and its not really working I don't know how or what to do about it can anyone help me? Thanks a lot.

Answer 1

I'm not sure what it should look like, but here are two examples. The first uses a clip-path. With the clip-rule="evenodd" it is only the "frame" that shows. The second is a mask. In the mask the path has a white fill – that is what makes the image show.

In both cases I made the viewBox the same aspect ratio as the image to make the image take up the entire space of the SVG.

 <svg width="300" viewBox="0 0 284 178" xmlns="http://www.w3.org/2000/svg"> <defs> <clipPath id="cp1"> <path clip-rule="evenodd" d="M104.5 0L0.143921 142.5H208.856L104.5 0ZM104.5 10.1551L11.9747 136.5H197.025L104.5 10.1551Z" /> </clipPath> </defs> <image width="100%" height="100%" href="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQU69UnQwUGs3VTS51AEM2MRTHED0PRl0rMLVw3hdS_95xNdTPqY5_7E3N-pzgp49lrdkY&usqp=CAU" clip-path="url(#cp1)"/> </svg> <svg width="300" viewBox="0 0 284 178" xmlns="http://www.w3.org/2000/svg"> <defs> <mask id="m1"> <path d="M104.5 0L0.143921 142.5H208.856L104.5 0ZM104.5 10.1551L11.9747 136.5H197.025L104.5 10.1551Z" fill="white"/> </mask> </defs> <image width="100%" height="100%" href="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQU69UnQwUGs3VTS51AEM2MRTHED0PRl0rMLVw3hdS_95xNdTPqY5_7E3N-pzgp49lrdkY&usqp=CAU" mask="url(#m1)"/> </svg>