css - 转换 SVG 元素(rotateX)的正确方法是什么？

Question

我尝试用透视图转换 SVG 元素，发现它不起作用，但对 HTML 标记的相同转换可以正常工作。

jsfiddle 实验:https://jsfiddle.net/5ms7ubck/ (html 转换(红色元素)VS svg(灰色))。

.outer {
  perspective: 1000px;
}

.inner {
  transform: rotateX(60deg) perspective(1000px);
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
}

<svg width="151px" height="151px" viewBox="0 0 151 151" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <defs></defs>
      <g class="outer" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
          <rect class="inner" width="150" height="150" fill="#D8D8D8"></rect>
      </g>
</svg>

我想找到转换 SVG 元素的正确方法。我还测试了 SVG Rotation in 3D 中的示例而且它也不起作用。

Answer 1

某些浏览器，如 Firefox，支持对 SVG 形状进行 3D 转换。例如，如果 Firefox 是 add overflow: visible，那么你需要做的就是让你的第一个 fiddle 工作。到 <svg>元素。

https://jsfiddle.net/gqsy14be/ (仅限火狐)

然而，这是一项实验性功能，目前您不能依赖跨浏览器支持。

但好消息是外层 <svg>元素被视为任何其他 HTML 元素，并且可以进行 3D 转换。

.test {
  display: block;
  width: 100px;
  margin: 20px;
}

.outer {
  perspective: 1000px;
}


.inner {
  transform: rotateX(60deg);
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
}

<div class="test">
  <div class="outer">
    <svg width="151px" height="151px" viewBox="0 0 151 151" class="inner">
      <defs></defs>
      <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
          <rect width="150" height="150" fill="#D8D8D8"></rect>
      </g>
    </svg>
  </div>
</div>

<div class="test">
  <div class="outer">
    <div class="inner" style="background-color: red; width: 150px; height: 150px;">

    </div>
  </div>
</div>

但显然这对您尝试在 SVG 中制作 3D 实体没有帮助。您只能变换 SVG 的平面。