SVG旋转3D

Question

我需要围绕3D中的任意点旋转SVG文档中的路径。 It appears that通过使用4x4变换矩阵或rotateX或rotateY变换，有多种方法可以做到这一点。我尝试了这两种方法，似乎都没有用。这些都支持吗？

对于我的应用程序，位图将是最终输出，所以我不担心浏览器支持。我对任何工具都开放 - 我可以通过selenium运行特定的浏览器，或者使用独立的SVG光栅化器。

这是我迄今为止尝试过的（使用谷歌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>

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

Answer 2

3d旋转非常棘手，我只是刚刚开始使用它们。 transform：rotateX（）和rotateY（）将为您应用转换，但是要获得梯形的透视图，您需要在父元素的css中使用透视图。

Here's a codepen。

相关的位是

#parent {
  perspective: 4rem;
}

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

将透视图视为对象与屏幕背面的距离。值越低，透视图的扭曲就越强烈。

Answer 3

请参阅https://www.w3schools.com/css/css3_3dtransforms.asp： 事实上，在大多数浏览器中，CSS代码{transform：rotateX（## deg）}和类似的-Y和-Z现在应该没有前缀。但似乎这些不能合并。因此，您可能希望使用更通用的方法：{transform：rotate3d（x，y，z，angle）}，您可以在其中提供任意旋转轴。 希望有所帮助...