如何将SVG（或CSS）中的图像转换为非平行四边形？

我希望能够创建一个SVG，它在背景中有一个（正常）图像，在某个地方有一个不同的较小图像，它的4个“边”被移动以创建一个非矩形形状。思考类似于扭曲的图像以创建透视图

在SVG中可能吗？如果不是，在CSS中是否有可能在页面的非固定元素中可见

---

我找到了一些CSS透视图，但它使用了X、Y、Z，而我实际上只需要在预定义的非平行边“框”中拟合（扭曲）图像。

理论上，有一种方法可以创建使用SVG 1.1所需的扭曲类型。它依赖于网络

如果您想了解它，我将在下面提供示例代码。然而，我不推荐它，只是出于好奇；根据我的测试，该代码目前仅在Chrome（可能还有相关浏览器）中提供所需的结果。Internet Explorer扭曲了图像，但略有不同。实际上，我让它在IE中使用稍微不同的代码，但在Chrome中没有。Firefox不支持使用

过滤器元素从SVG导入片段，因此测试用例失败；如果将贴图渐变创建为单独的图像文件，则应该可以使用。还有就是渲染质量差，因为使用像素操作会扭曲图像

linearGradient{
颜色插值：linearRGB；
}

SVG提供的图像仅为2d。听起来CSS透视属性就是你想要的。不确定为什么我会得到反对票。@RobertLongson，谢谢你，我知道SVG是2d的，我想知道是否有办法移动边缘来给人留下这样的印象。可能是因为缺乏研究。也就是说，您是否因为这样或那样的原因尝试并放弃了一些解决方案？没有找到任何解决方案。我找到了一些CSS透视图，但它使用了X，Y，Z，当我真的只需要在预定义的非等边“框”中拟合图像时，当然了。我会纠正的。自白：“389746–ImplementFeDisplacementMap-Bugzilla-Mozilla”是谷歌“feDisplacementMap支持”的最热门搜索结果之一，我甚至没有点击确认它（使用你的补丁）在2007年被关闭！不是我的补丁，我是那个补丁的评论员。我写了瓦片过滤器FWIW。