SVG元素上的3D转换

SVG元素上的3D转换

---

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>