3D 中的 SVG 旋转

Question

我需要围绕 3D 中的任意点旋转 SVG 文档中的路径。 似乎有多种方法可以通过使用 4x4 转换矩阵或 rotateX 或 rotateY 转换来做到这一点。 我已经尝试了这两种方法，但似乎都不起作用。这些在任何地方都受支持吗？

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

这是我到目前为止尝试过的（使用谷歌浏览器 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 中使用透视。

这是一个代码笔。

相关位是

#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） } ，在那里你可以给出一个任意的旋转轴。希望有帮助...