SVG元素上的3D转换 [英] 3d transforms on SVG element

问题描述

是否可以通过对SVG元素进行 3d变换来实现透视？

Is it possible to achieve perspective with 3d transforms on a SVG elements?

我在谈论与Star相似的事物战争开头的标题看起来像3D透视图。这是一个 jsfiddle ，它使用 CSS3 3d转换实现了预期的效果：

I'm talking about something similar with how the Star Wars opening titles look like with 3d perspective. This is a jsfiddle with the desired effect achieved using CSS3 3d transforms:

<section style="transform: perspective(200px) rotateX(-30deg); transform-origin: 50% 100%; text-align: justify; width: 100px;">
  <p style="backface-visibility: hidden;">TEXTTEXTTEXT</p>
</section>

推荐答案

---

更新2018年11月：

在最新的chrome和Firefox作品中测试问题的片段。尽管对svg元素的3d转换的支持不是很广泛，但浏览器正在越来越多地实现它。

Testing the snipet from the question in latest chrome and Firefox works. Although support for 3d transforms on svg elements isn't very wide, browsers are implementing it more and more.

原始答案：

SVG元素不支持3D转换。但是，有一些解决方法：

3D transforms aren't supported on SVG elements. There are a few workarounds though :

如果svg不包含不应进行转换的元素，则可以在SVG元素上使用 CSS 3d转换本身：

If the svg doesn't contain elements that shouldn't be transformed, you can use CSS 3d transforms on the SVG element itself :

svg {
  width: 70%;
  margin: 0 auto;
  display: block;
  -webkit-transform: perspective(300px) rotateX(30deg);
  transform: perspective(300px) rotateX(30deg);
}

<svg viewbox="0 0 100 20">
  <text x="0" y="20">TEXTEXTEX</text>
</svg>

如果是多边形，则使2D多边形看起来像3D多边形。在下面的示例中，红色矩形是3D旋转的（ rotateX（40deg）），黑色矩形是2D SVG多边形，看起来像是3D旋转的矩形：

In case of polygons, you make a 2D polygon look like a 3D polygon. In the following example, the red rectangle is 3D rotated (rotateX(40deg)) and the black rectangle is a 2D SVG polygon made to look like a 3D rotated rectangle:

div{
  display:inline-block;
  width:200px; height:100px;
  background:red;
  transform:perspective(500px) rotateX(40deg);
}
svg{
  display:inline-block;
  width:220px; height:auto;
}
div, svg{
  display:inline-block;
  margin:0 10px;
}

<div></div>
<svg viewbox="0 0.5 10 4">
  <polygon points="9.9 4.1 0.1 4.1 0.7 0.6 9.3 0.6" fill=""/>
</svg>

这篇关于SVG元素上的3D转换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！