我试图获取一个带有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>