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>

（从rotateX 中省略cy 和cz 得到相同的结果）。

我也尝试过使用 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

3d 旋转很棘手，我才刚刚开始使用它们。变换：rotateX() 和 rotateY() 将为您应用变换，但要获得梯形的透视，您需要在父元素的 css 中使用透视。

Here's a codepen.

相关位是

#parent {
  perspective: 4rem;
}

#child {
  transform: rotateX(45deg);
}

将透视视为对象与屏幕背面的距离。值越低，透视失真越严重。

Answer 2

见https://www.w3schools.com/css/css3_3dtransforms.asp： 事实上，CSS 代码 { transform: rotateX(##deg) } 和 -Y 和 -Z 的类似代码现在应该可以在大多数浏览器中不带前缀地工作。但似乎这些不能结合起来。因此，您可能希望使用更通用的方法：{ transform: rotate3d(x,y,z,angle) } ，您可以在其中给出任意旋转轴。 希望对您有所帮助...

Answer 3

我发现在 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>

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