翻译等轴测视图的SVG元素

Question

我正在研究一些JavaScript代码,以在等距3Dish视图中渲染标准的2D SVG/Canvas元素(用Raphael-JS绘制).

假设我们有两个相邻的矩形.然后我将它们以正确的角度重新绘制(基本上是30度扭曲),用于等轴测视图.

(在上图中,我展示了两个相应元素的来源.)

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

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

这是一些等距瓷砖的图像,如果有任何关于我希望如何放置这些对象的混淆.

Answer 1

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

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>