Question

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

关于jsfiddle的实验：https://jsfiddle.net/5ms7ubck/（html转换（红色元素）与svg（灰色））。

SVG代码：

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

CSS代码：

.outer {
  perspective: 1000px;
}


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

我想找到转换SVG元素的正确方法。我还测试了SVG Rotation in 3D的示例，但该示例也无法正常工作。

Answer 1

某些浏览器（例如Firefox）支持SVG形状上的3D转换。例如，如果将Firefox添加overflow: visible到<svg>元素中，您要做的一切都是为了使您的第一把小提琴正常工作。

https://jsfiddle.net/gqsy14be/（仅Firefox）

但是，这是一项实验性功能，现在您不能依靠跨浏览器支持。

但是好消息是，外部<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的平面。

Answer 2

将transform属性放入g标签本身。

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform

请参阅此链接，这将解决您的问题

什么是转换SVG元素（rotateX）的正确方法

2 个答案: