我有一个图像，我需要使用 SVG 路径对其进行剪辑。它适用于定义的图像尺寸，如 688px x 800px，但我的问题是，我希望它能够响应。我已经尝试让它工作，preserveAspectRatio但还没有成功（您可以在问题底部找到此代码）。我以前没有做过很多这样的事情，所以任何帮助将不胜感激。
只是为了澄清一下，当我说响应式时，我希望它能够根据屏幕尺寸更加流畅，而不是切割直边等。
编辑：我尝试将图像放置在 SVG 元素内，但它根本无法正常工作，我也不知道如何使这个想法响应 - https://jsfiddle.net/g80unhyq/
这是我上面列出的尺寸
这就是响应能力开始发挥作用时的样子
我有一个到目前为止在 Tailwind 游乐场上所做的事情的例子 - https://play.tailwindcss.com/fRq1Cv6OqP?file=css
HTML：
<div class="image-container">
<img src="https://images.unsplash.com/photo-1691687824517-a62cfdef9c6e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1367&q=80" alt="Your Image" class="masked-image" />
</div>
CSS：
.image-container {
position: relative;
width: 688px;
height: 800px;
}
.masked-image {
width: 100%;
height: 100%;
object-fit: cover;
clip-path: path('{{ Same path data as the Tailwind link above, StackOverflow just has a character limit. }}');
}
如上所述，我还尝试以稍微不同的方式使其工作：
HTML：
<div class="image-container">
<img src="https://images.unsplash.com/photo-1691687824517-a62cfdef9c6e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx" />
<svg preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg">
<defs>
<clipPath id="svg-mask">
<path
d="{{ Same path data as the Tailwind link above, StackOverflow just has a character limit. }}"/>
</clipPath>
</defs>
</svg>
</div>
CSS：
.image-container img {
clip-path: url(#svg-mask);
}
但还是没有运气
将图像打包在 SVG
<image>标签中，<svg>并使用viewBox有效的尺寸。然后，响应特性<svg>将负责调整图像和剪辑路径的大小。不幸的是，您的剪辑路径定义太大，无法打包到此处的答案中。下面的代码片段使用了粗略的近似值。