SVG元素上的3D转换

小编典典

SVG元素上的3D转换

css

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

我说的是与《星球大战》首部作品的3d透视图相似的事物。这是一个使用 CSS3
3d转换达到预期效果的jsfiddle： __

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

  <p style="backface-visibility: hidden;">TEXTTEXTTEXT</p>

</section>

阅读 1796

2020-05-16

共1个答案

小编典典

2018年11月更新：

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

来源答案：

SVG元素不支持3D变换 。不过，有一些解决方法：

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

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旋转的矩形：

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>

2020-05-16