Javascript Raphael.js透视变换

我正在使用Raphael.js，在创建透视变换时遇到了一个问题。它应该是svg/raphael解决方案，因为这是创建图像的一个步骤。下面是它现在的样子：

目标是使用变换在z轴上使其倾斜。它应该看起来像这样的图像：

---

代码：

---

编辑：

---

有什么解决办法吗

我不知道这里的答案是否是歪斜。问题是，您试图在纸张上应用3d效果，而不是2d效果。
我不确定这也可以用纯svg和raphael实现，但这里有一个使用css3 3d转换（rotateX）和透视的纯css解决方案：

body {
    /* the lower the value, the higher the distortion */
    perspective: 600px;
}

#raph-rotate {
    width: 500px;
    height: 750px;
    margin: 0 auto;
    transform: rotateX(30deg);
    transform-origin: 50% 100%;
}

---

这是最新的提琴：

我认为这在拉斐尔是不可能的。一个简单的问题：你为什么不直接画出你想要的形状呢？我的意思是，这不是一个很难画的形状

话虽如此，我认为你应该画不同的画。我会这样做（我重复了您在“代码”部分中提供给我们的路径）：

---

通过这种方式，您可以修改集合中游戏场的每个元素，而无需多次重写“.attr（{stuff…}）”。

您可以在JSFIDLE上获得一个测试示例。我已经更新了问题：）是的，您是对的。这是一个透视变换，而不是倾斜。我会更新我的帖子。您的解决方案工作正常，但我需要一个raphael/svg解决方案，因为转换是创建图像的中间步骤：）raphael和svg是2D技术，它们都不会直接进行您想要的转换上面是由一个将svg文件转换为raphael代码的工具生成的：）目前我只想尝试一些效果。稍后我会把它放在非常好看的OOP样式中：）我明白了：）尽管如此，我可能遗漏了一些东西，但是为什么不尝试直接用你想要的形状来绘制它呢？我认为这很简单。我想创建一个用户可以动态更改的图像。颜色、不透明度和透视应该是选项。如果在拉斐尔无法实现你想要的效果，你可以绘制多个版本的运动场。这样可以限制用户对透视值的选择。你知道，在你想要的轴上，每10°就有10°，类似的。但这是一项很长的工作。

body {
    /* the lower the value, the higher the distortion */
    perspective: 600px;
}

#raph-rotate {
    width: 500px;
    height: 750px;
    margin: 0 auto;
    transform: rotateX(30deg);
    transform-origin: 50% 100%;
}

var path;
var set = paper.set();
function obj(chosenPath,color){
                switch(color){

                    case 1:
                    path = paper.path(chosenPath).attr({
                        fill:field_color1,
                        stroke : "none",
                        "fill-opacity":opacity
                    });
                    break;

                    case 2:
                    path = paper.path(chosenPath).attr({
                        fill:field_color2,
                        stroke : "none",
                        "fill-opacity":opacity
                    });
                    break;

                    case 3:
                    path = paper.path(chosenPath).attr({
                        fill:line_color,
                        stroke : "none",
                    });
                    break;

                    default:
                    return hue;
                }

                set.push(path);

            }

obj('M 2500 3750 L 2500 3481.9 L 0 3481.9 L 0 3750 L 2500 3750Z',1);
obj('M 2500 3482.2 L 2500 3214.1 L 0 3214.1 L 0 3482.2 L 2500 3482.2Z',2);
obj('M 2500 3214.3 L 2500 2946.2 L 0 2946.2 L 0 3214.3 L 2500 3214.3Z',1);
obj('M 2500 2946.5 L 2500 2678.4 L 0 2678.4 L 0 2946.5 L 2500 2946.5Z',2);
obj('M 2500 2678.6 L 2500 2410.6 L 0 2410.6 L 0 2678.6 L 2500 2678.6Z',1)
obj('M 2500 2410.8 L 2500 2142.7 L 0 2142.7 L 0 2410.8 L 2500 2410.8Z',2)
obj('M 2500 2142.9 L 2500 1874.9 L 0 1874.9 L 0 2142.9 L 2500 2142.9Z',1);
obj('M 2500 1875.1 L 2500 1607 L 0 1607 L 0 1875.1 L 2500 1875.1Z',2);
obj('M 2500 1607.3 L 2500 1339.2 L 0 1339.2 L 0 1607.3 L 2500 1607.3Z',1);
obj('M 2500 1339.4 L 2500 1071.3 L 0 1071.3 L 0 1339.4 L 2500 1339.4Z',2);
obj('M 2500 1071.6 L 2500 803.5 L 0 803.5 L 0 1071.6 L 2500 1071.6Z',1);
obj('M 2500 803.8 L 2500 535.7 L 0 535.7 L 0 803.8 L 2500 803.8Z',2);
obj('M 2500 535.9 L 2500 267.8 L 0 267.8 L 0 535.9 L 2500 535.9Z',1);
obj('M 2500 268 L 2500 0 L 0 0 L 0 268 L 2500 268Z',2);
obj('M 1237.1 597.3 C 1237.1 604.4 1242.9 610.2 1250 610.2 C 1257.1 610.2 1262.9 604.4 1262.9 597.3 C 1262.9 590.1 1257.1 584.4 1250 584.4 C 1242.9 584.4 1237.1 590.1 1237.1 597.3',3);
obj('M 1262.9 3151.7 C 1262.9 3144.6 1257.1 3138.8 1250 3138.8 C 1242.9 3138.8 1237.1 3144.6 1237.1 3151.7 C 1237.1 3158.9 1242.9 3164.7 1250 3164.7 C 1257.1 3164.7 1262.9 3158.9 1262.9 3151.7',3)