将SVG缩放并拉伸到四个任意角

Question

我有一个宽度为w，高度为h的SVG图片（网站计划），我想在地图背景上查看。

要将其叠加到地图上的正确位置，我想将其拉伸到四个任意角落：x1,y1，x2,y2，x3,y3，x4,y4。< / p>

我想我可以通过SVG变换（缩放，旋转，倾斜，翻译）的组合来做到这一点，但我的数学远不及工作。有线索吗？

Answer 1

轮换和翻译可以描述Euclidean (i.e. length-preserving) transformations。通过添加各向同性缩放，您可以获得similarity transformations，并且通过各向异性缩放和倾斜，您甚至可以获得affine transformations。这就是您的运营可以表达的那种转变。

但仿射变换已由三个点及其图像唯一定义。这意味着第四个角落最终将位于其他三个角落确定的位置。要任意定位四个角，您需要projective transformation。

如果浏览器支持3D中的投影转换，另请参阅this post关于计算投影转换，如何应用以及如何在JavaScript中使用它的hwo。