SVG 3D旋转

Question

我需要围绕3D中的任意点旋转SVG文档中的路径。 It appears that通过使用4x4转换矩阵或rotateX或rotateY转换，可以有多种方法来执行此操作。我已经尝试了这两种方法，但似乎都没有用。这些在任何地方都受支持吗？

对于我的应用程序，位图将是最终的输出，因此我不必担心浏览器的支持。我可以使用任何工具-我可以通过 Selenium 运行特定的浏览器，也可以使用独立的SVG光栅化器。

到目前为止，这是我尝试过的操作(使用Google Chrome 31):

我希望这是一个围绕X轴旋转的黑色矩形，看起来像梯形。

<svg version="1.1" 
     xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink" width="640px" height="480px">

    <rect x="100" y="100" width="440" height="280" fill="#000000" 
          transform="rotateX(30 580 100)"></rect>
</svg>

(从 cy中删除 cz和 rotateX会得到相同的结果)。

我也尝试过使用4x4矩阵。从上面我看不出有什么区别。我也怀疑我的数学在寻找正确的矩阵元素上是正确的。

<svg version="1.1" 
     xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink" width="640px" height="480px">

    <rect x="100" y="100" width="440" height="280" fill="#000000" 
          transform="matrix(102400 0 0 0 0 88681.00134752653 -159.99999999999997 1387899.8652473476 0 159.99999999999997 88681.00134752653 -15986.602540378442)"></rect>
</svg>

Answer 1

我发现SVG中确实没有一种方法可以进行任何现代浏览器支持的3D旋转(据我所知)。但是，CSS3确实具有类似的“变换”属性。

以下对我有用:

<svg version="1.1" 
     xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink" width="640px" height="480px">

    <rect x="100" y="100" width="440" height="280" fill="#000000" style="-webkit-transform: rotateX(30); -webkit-transform-origin-y: 580px; -webkit-transform-origin-z: 100"></rect>
</svg>

显然，这不是一个很好的跨浏览器解决方案(因为它使用带前缀的属性)，但这不是我的应用程序所需要的。