3d变换SVG [英] 3d transforms on SVG

问题描述

是否可以在SVG 元素上实现3d像透视变换？

我说的是类似星球大战开幕式的样子。

这是一个我用同样理想的效果制作的jsfiddle使用css3转换实现：

 < section style =transform：perspective（200px）rotateX（-30deg）; transform-origin：50％ 100％; text-align：justify; width：100px;> < p style =backface-visibility：hidden;> TEXTTEXTTEXT< / p>< / section>  

小提琴

解决方案

SVG元素不支持3D变换。有几种解决方法：

如果svg不包含不应该转换的元素，则可以在SVG元素上使用 CSS 3d transforms本身： data-console =falsedata ：

  svg {width：70％; margin：0 auto;显示：block; -webkit-transform：perspective（300px）rotateX（30deg）; transform：透视（300px）rotateX（30deg）;}  

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

在多边形的情况下，使2D多边形看起来像一个3D多边形。在下面的例子中，红色矩形是3D旋转（ rotateX（40deg）），黑色矩形是一个2D SVG多边形，看起来像一个3D旋转矩形： p>

  div {display：inline-block; width：200px; height：100px;背景：红色; 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.6fill =/>< / svg>  

/ p>

Is it possible to achieve 3d like perspective transforms on an SVG element ?

I'm talking about something similar with how the Star Wars opening titles look like.
This is a jsfiddle I made with the same desirable effect achieved using css3 transform:

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

fiddle

解决方案

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>

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