3D中的SVG旋转

Question

我需要围绕SVG文档中的任意点在3D空间中旋转路径。根据文档，可以通过使用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>

< p >（省略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>

- flndr

---

请发布您尝试过的代码。 - Michael Mullany

Answer 1

我发现，在任何现代浏览器中，SVG都不支持进行3D旋转（就我所知）。但是，CSS3确实有类似的“transform”属性。

以下内容适用于我：

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

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

- flndr

---

复制到 Codepen 后，这段代码似乎无法工作。可能需要更多的代码。 - matanster

就我个人而言，适用于Firefox v44的转换是rotateX（30度）; - Emo Mosley

请注意，"deg" 是必需的才能使其正常工作。您还可以使用 "transform-origin: 580px 100px;"（不确定所需值）来确定元素的旋转中心。 - Emo Mosley

Answer 2

3D旋转很棘手，我才刚开始使用。transform: rotateX() 和 rotateY() 可以为您应用变换，但要获得梯形的透视效果，您需要在父元素的CSS中使用perspective。

这里是一个CodePen示例。

相关部分是

#parent {
  perspective: 4rem;
}

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

将透视视为对象距离屏幕后方的距离。数值越低，透视的扭曲程度就越强。

- shadycrzy

Answer 3

请参考https://www.w3schools.com/css/css3_3dtransforms.asp： 实际上，CSS代码{ transform: rotateX(##deg) }以及类似于-Y和-Z的代码现在在大多数浏览器中都可以无需前缀使用。但是似乎这些代码不能组合使用。因此，您可能希望使用更通用的方法：{ transform: rotate3d(x,y,z,angle) }，其中您可以给出任意旋转轴。 希望这有所帮助...

- Max