how to mask an svg shape to an svg image

June 21, 2022

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.

>Solution :

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>