3d-преобразования на элементе SVG

Question

Возможно ли достижение перспективы с помощью 3d-преобразования на элементах SVG?

Я говорю о чем-то подобном с тем, как открываются титулы Звездных войн с 3D-перспективой. Это jsfiddle с желаемым эффектом, достигнутым с помощью CSS3 3D-преобразований:

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

Answer 1

3D преобразований не поддерживаются SVG элементов. Есть несколько обходных путей, хотя:

Если SVG не содержит элементы, которые не должны быть трансформированы, вы можете использовать CSS 3D-преобразования на самом SVG элемент:

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>

В случае полигонов вы делаете двумерный многоугольник похожим на трехмерный многоугольник. В следующем примере, красный прямоугольник 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>