翻译等轴测视图的SVG元素

Question

我正在研究一些JavaScript代码，以在等距 3Dish 视图中呈现标准2D SVG / Canvas元素（使用Raphael-JS绘制）。

假设我们有两个相邻的矩形。然后我以正确的角度（基本上是30度扭曲）重新绘制等轴测视图。

（在上图中我展示了两个相应元素的来源。）

我的问题是我不知道如何正确翻译所有单个元素，以便它们正确“平铺”而不是仅重叠。

虽然实际使用瓷砖会让事情变得更容易，因为我可以将任何给定瓷砖的位置放在它之前的瓷砖上，但瓷砖在这种情况下不起作用。一切都是动态的，比简单的x / y平面更复杂。

Here is an image of some isometric tiles如果对如何放置这些对象有任何疑惑。

Answer 1

使用Raphel.js 2.0你可以使用.transform（）方法并提供一个旋转45度的变换字符串并垂直缩放70％（或任何你想要的音高）。重要的是要注意你正在旋转和缩放的位置 - 在这种情况下我使用的是0,0。您还会注意到我正在向右翻译100以补偿轮换。

变换字符串对于这个用例也很有用，因为你可以简单地将投影变换预先添加到场景中其他对象的变换中，它们都会在正确的位置结束。

例如（见http://jsfiddle.net/k22yG/）：

var paper = Raphael(10, 10, 320, 240),
    set = paper.set();

// Build a set to make it easier to transform them all at once
set.push(
    // Grid of rectangles
    paper.rect(0, 0, 50, 50),
    paper.rect(60, 0, 50, 50),
    paper.rect(0, 60, 50, 50),
    paper.rect(60, 60, 50, 50)
);

// Rotate, then scale, then move (describe in "reverse" order)
set.transform('t100,0s1,0.7,0,0r45,0,0');​

Answer 2

您不应将转换应用于单个元素，而应将源元素应用于集合。在拉斐尔，你可以使用像

这样的东西

var s = paper.set();
s.push(square1, square2);

现在进行转换而不需要太多的数学运算，这应该是这样的：

// s.clone(); // if you want to keep originals
s.rotate(45, 0, 0).scale(1, .7).translate(100, 0);

（但是，RaphaelJS似乎打破了旋转项目的缩放。）

普通SVG示例：

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
    viewBox="-200,-500 1000,1000">
    <title>Isometric</title>
       <g id="source"> <!-- group -->
           <circle cx="-50" cy="-50" r="50"/>
           <rect width="100" height="100"/>
           <rect width="100" height="100" x="101"/>
           <rect width="100" height="100" x="50" y="-200"/>
       </g>
       <!-- make copy of group and apply transformations -->
       <use xlink:href="#source" transform="translate(500) scale(1, .7) rotate(-45)"/>
</svg>