在svg的3d变换透视

Question

我正在创建一个简单的html和svg视频游戏。

在this question中，我询问了如何进行嵌套元素，其中外部元素围绕x轴向后倾斜，而内部元素向前倾斜。

To my surprise the solution doesn't work for svg.。为什么还有其他方法来实现这种效果？

Answer 1

SVG不支持3D变换。您可以转换整个SVG（浏览器首先将其渲染为图像），但不能转换为单个元素。

  <div id="outer">
    <svg id="inner" width="500" height="500">
      <image x="20" y="90" width="200" height="200" xlink:href='http://www.w3schools.com/html/smiley.gif' />
    </svg>
  </div>

Demo here

Answer 2

http://cs.sru.edu/~ddailey/svg/XYZrot3D2.svg处的文档对一个SVG中的不同内容使用单独的3D变换。它在Chrome中无法正常运行，但它在FF中。