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

问题描述

是否可以使用 SVG 元素上的 3d 变换来实现透视?

我说的是与《星球大战》开头标题在 3D 视角下的外观类似的东西.这是一个 jsfiddle 使用 CSS3 3d 转换实现的预期效果:

<section style="transform:perspective(200px)rotateX(-30deg);transform-origin: 50% 100%; text-对齐:对齐；宽度:100px；"><p style="backface-visibility: hidden;">TEXTTEXTTEXT</p></section>

解决方案

---

2018 年 11 月更新:

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

<小时>

原答案:

SVG 元素不支持 3D 转换.不过有一些解决方法:

如果 svg 不包含不应转换的元素，您可以对 SVG 元素本身使用 CSS 3d 转换:

svg {宽度:70%；边距:0 自动；显示:块；-webkit-transform:透视(300px)rotateX(30deg)；变换:透视(300px)rotateX(30deg)；}

对于多边形，您可以使 2D 多边形看起来像 3D 多边形.在以下示例中，红色矩形是 3D 旋转的 (rotateX(40deg))，黑色矩形是 2D SVG 多边形，看起来像 3D 旋转矩形:

div{显示:内联块；宽度:200px；高度:100px；背景:红色；变换:透视(500px)rotateX(40deg)；}SVG{显示:内联块；宽度:220px；高度:自动；}div，svg{显示:内联块；边距:0 10px;}

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

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

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>

解决方案

---

Update Nov 2018:

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.

---

Origin answer :

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

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>

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