У меня есть 4-страничный буклет (в перспективе), разработанный с помощью иллюстратора и экспортированный как SVG. У меня есть текст на каждой странице листовки, он слишком тяжел для веб-рендеринга (так как текст преобразуется в пути). поэтому я решил оставить базовую листовку как SVG и найти способ имитировать перспективу в сопроводительном тексте и сопоставить ее с перспективой листовок. Я также нашел сценарии, позволяющие создать перспективу, но как только я размещу (встроенную) перспективу текст в коде SVG действует совсем по-другому. Я сделал скриншоты конечного результата, которого я хочу достичь, чтобы вы могли понять, что я имею в виду.
желаемый конечный результат image
я использую тег foreignObject для реализации HTML внутри SVG.
код, который я сделал и что происходит