SVG响应剪辑路径或蒙版图像

Question

我正在尝试将SVG剪辑路径应用于gif（我也尝试过蒙版图像，但在这里也无法获得想要的结果），以使其在所有屏幕尺寸的视口范围内。] >

我尝试了以下示例：

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

尺寸/响应度似乎正常，但没什么可看的。据我所知，gif不会被裁剪。这些示例大多数都将svg的高度和宽度设置为0，我已经做到了，但是svg似乎确实没有任何质量。

这里是codepen

带有SVG的HTML：

    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>

我正在尝试将SVG剪辑路径应用于gif（我也尝试过蒙版图像，但在这里也无法获得想要的结果），以使其在所有屏幕的视口范围内...

Answer 1

我希望这是您期望的结果。请注意，我使用的是使用此工具计算的其他路径：Convert SVG absolute clip-path to relative。我也从<clipPath>