3D SVG旋转

Question

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

对于我的应用程序，位图将是最终输出，因此我不必担心浏览器的支持。我可以使用任何工具-我可以通过硒运行特定的浏览器，也可以使用独立的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>

显然，这不是一个好的跨浏览器解决方案（因为它使用前缀属性），但这不是我在我的应用程序中需要的东西。