具有贝塞尔曲线的 SVG 路径的透视变换答案

【问题标题】：Perspective transform for SVG path with Bezier curves具有贝塞尔曲线的 SVG 路径的透视变换
【发布时间】：2018-01-10 14:44:58
【问题描述】：

我在这里关注了这个帖子（不幸的是它非常古老，我会说古老）： Perspective transform of SVG paths (four corner distort)

这个线程包含很好的 pdf，解释了如何进行计算（见下文）。

问题：在原帖中，作者说该方法适用于简单路径，但不适用于弧线。有人可以帮助我理解 - 这种方法是否适用于贝塞尔曲线？示例中使用的字体显然是使用曲线...

【问题讨论】：

您对 CSS 答案有什么不明白的地方？ stackoverflow.com/a/28397315/1038015
嘿罗伯特（顺便说一句，我学到了很多感谢你 - 谢谢你！:)。 CSS 3D 转换不适用于 SVG 元素级别 afaik。因此我不能使用这些（尽管我在这里检查了这个例子：bl.ocks.org/mbostock/10571478，这令人印象深刻）。我要解决的问题是能够在给定的 SVG 元素级别应用这 4 点失真，前提是所有这些都是路径。细微差别是我的路径总是使用二次或三次贝塞尔曲线......
CSS 3d 转换在 Firefox 中工作，据我所知 Chrome 在 SVG 元素上。当然可能有错误。
我会试着检查一下。为了我的目标，我需要确保 transform: matrix3d(...) 是有效的。将测试并查看。
嗯，好吧，尽管 css 在 chrome 中对我有用，但我想探索从脚本中获取“新”坐标然后更新我的元素的选项。今晚会做一个飞行员，看看我能走多远。基于 CSS 的解决方案不适合主要是因为我想为框架做任意位置

【解决方案1】：

可以对贝塞尔曲线的控制点进行仿射变换，得到变换后的贝塞尔曲线。

但透视变换不适用于“通常”（用于字体）贝塞尔曲线 - 它们产生有理贝塞尔曲线。 p>

【讨论】：

我明白了，所以如果我将在此示例中使用方法：bl.ocks.org/mbostock/10591444 - 它不适用于包含 Bezier 的路径是否正确？
这个例子计算了 persp 的矩阵。转换。因此，转换将点转换为点，将直线段转换为直线段。但是，如果将其应用于贝塞尔曲线的控制点，则生成的控制点将描述另一条曲线 - 如果您转换曲线的中间点（作为点），它们将与转换后的贝塞尔曲线的对应点不同。我认为对于小的透视失真，结果会非常接近，但对于强烈的失真，曲线可能基本上会偏离。
无法将来自透视变换的有理贝塞尔曲线转换（或近似）为“经典”贝塞尔曲线？
@Claudio 不可能进行精确转换，具有一定公差的近似值应该是真实的 - 有两个有理曲线的内部点（例如 t=1/3 和 2/3），可以制作经典的贝塞尔在相同的 t 上具有相同的点。如果近似不好，也许值得将有理曲线分成更小的部分）