How to inverse perspective Transformation on SVG-CodePudding

The

svgIcon:

A set of transformations (perspective, rotateX, scale, and translate) are applied on the parent element (svgPlan) :

svg.style('transform', 'perspective(30em) rotateX(33deg) scale(1.7) translate(0%, -6%)');

svgPlan after transformation:

I want to display the svgIcon inside the svgPlan.

THE PROBLEM : the transformations are applied on both the parent element svgPlan and the child svgIcon. It seems that the child is automaticlly inherting the styles applied on the parent and this is not what I want. I want the icon to appear whitout any effect.

THE QUESTION : How can I Disinherit my child element from father's style (which I beleive is not possible on SVG at the moment), or apply an Inverse Transformation to make the Icon appear without any perspective or style ?

THE MINIMAL REPRODUCTIBLE EXAMPLE :

<div> <svg id="svgPlan" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 2118.5 624.2" enable-background="new 0 0 2118.5 624.2" xml:space="preserve" style="transform:perspective(30em) rotateX(30deg) scale(1.17)"> <rect width="1200" height="400" style="fill:rgb(224,224,224);stroke-width:3;stroke:rgb(0,0,0)" /> <g id="svgIcon"> <image x="550" y="120" width="120" height="120" xlink:href="https://svgshare.com/i/npz.svg"> </image> </g> </svg> </div>

Thank you for your help.

CodePudding user response：

As you are using HTML to apply perspective, rotation, etc. you should use HTML and javascript to place your icons. Also it seems that you want to keep the size of the icons independently of where they are placed on the rect.

You can simply "disinherit" their behaviour by removing them from svgPlan, calculate their positions and place them using HTML/Javascript. So you keep full control of what is happening.

<!DOCTYPE html> <div style="position:relative; with:auto; height:auto;"> <div style="position:absolute; width:100%; height:100%;"> <svg id="svgPlan" x="0px" y="0px" viewBox="0 0 2118.5 624.2" enable-background="new 0 0 2118.5 624.2" xml:space="preserve" style="transform:perspective(30em) rotateX(30deg) scale(1.17)" > <rect width="1200" height="400" style="fill:rgb(224,224,224);stroke-width:3;stroke:rgb(0,0,0)" /> </svg> </div> <div style="position:absolute; width:100%; height:100%;"> <svg id="svgIcon" x="0px" y="0px" viewBox="0 0 2118.5 624.2" enable-background="new 0 0 2118.5 624.2" xml:space="preserve" > <image x="550" y="120" width="120" height="120" xlink:href="https://svgshare.com/i/npz.svg"></image> </svg> </div> </div>

CodePudding user response：

It may be possible to achive that picture just by cancelling the rotateX to let the icon (which is put on the separate overlay svg) face to the viewpoint under the same perspective projection.

For example:

<div> <svg id="svgPlan" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" x="0px" y="0px" viewBox="0 0 2118.5 624.2" enable-background="new 0 0 2118.5 624.2" preserveAspectRatio="none" style="position: absolute; transform: perspective(30em) rotateX(30deg) scale(1.17) scaleZ(1.17);"> <rect width="1200" height="400" style="fill:rgb(224,224,224);stroke-width:3;stroke:rgb(0,0,0)" /> <rect width="610" height="160" y="240" fill="none" stroke="blue"/> </svg> <svg id="svgIcon" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" viewBox="0 0 2118.5 624.2" preserveAspectRatio="none" style="position: absolute; transform: perspective(30em) rotateX(30deg) scale3d(1.17, 1.17, 1.17) translate3d(calc(100% * 610 / 2118.5 - 50%), calc(100% * 240 / 624.2 - 50%), 0) rotateX(-30deg) translate3d(calc(-100% * 610 / 2118.5 50%), calc(-100% * 240 / 624.2 50%),0)"> <image x="550" y="120" width="120" height="120" xlink:href="https://i.stack.imgur.com/KZVZ0.png" preserveAspectRatio="xMidYMin slice"></image> </svg> </div>

Scaling effect on the icon due to perspective projection is to remain though.

Brief explanations of transforms applied to the icon

perspective(30em) rotateX(30deg) scale3d(1.17, 1.17, 1.17) : A copy of transform applied to svgPlan

translate3d(calc(100% * 610 / 2118.5 - 50%), calc(100% * 240 / 624.2 - 50%), 0) : Translation from css transform-origin(50%, 50%) back to the original position(610,240)

rotateX(-30deg) : Transform to cancel the rotation

translate3d(calc(-100% * 610 / 2118.5 50%), calc(-100% * 240 / 624.2 50%),0) : Translation from the bottom-center of the icon(610, 240) to css transform-origin(50%, 50%)