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

问题描述

我需要围绕 3D 中的任意点旋转 SVG 文档中的路径.看来有多种方法可以通过使用 4x4 转换矩阵或rotateX 或rotateY 变换.这两种方法我都试过了，似乎都不起作用.任何地方都支持这些吗?

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?

对于我的应用程序，位图将是最终输出，所以我不担心浏览器支持.我对任何工具都持开放态度——我可以通过 selenium 运行特定的浏览器，或者使用独立的 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):

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

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>

(从 rotateX 中省略 cy 和 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屋！