SVG group transformation for creating perspective ("keystone transformation")

Is there a way to create an SVG transform that transforms a square into an isosceles trapezoid to create the illusion of perspective?

I have a project ( visible here ) where I have one group of elements in svg (layout) that I would like to skew so that the bottom looks closer to the user.

I can convert a top-level SVG SVG element with CSS conversion (in browser support) using something like "-webkit-transform: perspective (1000px) rotateX (40deg)", but this does not work in a nested group.

Any suggestions appreciated, thanks!

+4
source share

Source: https://habr.com/ru/post/1440106/


All Articles