Responsive SVG Clip Path or Mask Image

问题

I am trying to get a gif with an SVG clip path applied to it (I've also tried mask image but couldn't get the desired outcome here either) to stay within the bounds of the viewport for all screen sizes.

I've tried following these examples:

Responsive clip-path with inline SVG; Create responsive SVG clip path / Making SVG <path> responsive; Complex SVG clip-path responsive; https://codepen.io/hesselberg/pen/aNgGwQ

The dimensions/ responsiveness seems to be working but there's nothing to see—the gif isn't getting clipped as far as I can tell. Most of these examples set the height and width of the svg to 0, which I have done but the svg seems to indeed not have any mass.

Here is a codepen

HTML with SVG:

    main {
    	width: 75%;
    	height: 75%;
    }
    
    .clip {
    	width: 100%;
    	height: 100vh;
    }
    
    figure {
    	clip-path: url(#ponyClips);
    	-webkit-clip-path: url(#ponyClips);
    
    }

    <main>
      <figure>
        <img class="clip" src="https://media.giphy.com/media/JLa3Ye8oryiS4/giphy.gif">
    	</figure>
    </main>
    
    <svg id="svg"  version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="0" width="0">
    	<defs>
    		<clipPath id="ponyClips" clipPathUnits="objectBoundingBox" transform="scale(0.0009484/0.0010070)" path fill="#282828">
    			<path d="M903.405,47.682C-206.912-268.784-76.332,2061.657,204.29,350.336c31.009-189.105,139.823,226.548,293.805,303.54
    			c153.983,76.991,304.424,84.071,304.424,84.071c-202.768-3.072,322.2-217.426,229.363-184.947
    			c-264.785,92.633-722.499,187.002-234-99c207.079-121.239,171.009,3.416,171.009,3.416S1137.262,114.336,903.405,47.682z"/>
    		</clipPath>
    	</defs>
    </svg>

来源：https://stackoverflow.com/questions/58449320/responsive-svg-clip-path-or-mask-image

标签

svg

clip-path

responsive-images