3D SVG旋转 [英] SVG Rotation in 3D

问题描述

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

I need to rotate the paths in my SVG document around an arbitrary point in 3D. It appears that there are multiple ways to do this by either using a 4x4 transformation matrix or the rotateX or rotateY transforms. I've tried both of these methods, and neither seem to work. Are these supported anywhere?

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

For my application, a bitmap is going to be the final output, so I'm not worried about browser support. I am open to any tool--I can run a specific browser through selenium, or use a standalone SVG rasterizer.

这是我到目前为止尝试过的（使用Google Chrome 31）：

This is what I've tried so far (using Google Chrome 31):

我希望

I would expect this to be a black rectangle, rotated about the X axis, and appearing like a trapezoid.

<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 和<$ c $来自 rotateX 的c> cz 给出相同的结果）。

(omitting cy and cz from rotateX gives the same result).

我也尝试使用4x4矩阵。我看不出上面有什么区别。我也怀疑我的数学是否正确，可以找到正确的矩阵元素。

I've also tried with a 4x4 matrix. I don't see any difference from above. I also doubt my math is correct in finding the right matrix elements.

<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>

推荐答案

我发现确实没有办法SVG执行3D旋转，这在任何现代浏览器中均受支持（据我所知）。但是，CSS3确实具有类似的转换属性。

I found that there really isn't a way in SVG to do a 3D rotation that is supported in any modern browser (to the best of my knowledge). However, CSS3 does have a similar "transform" property.

以下对我有用：

<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>

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

This, obviously, isn't a good cross-browser solution (as it uses prefixed properties), but that isn't something I need in my application.

这篇关于3D SVG旋转的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！