3d transform perspective in svg [duplicate]

StackOverflow https://stackoverflow.com/questions/23485222

  •  16-07-2023
  •  | 
  •  

Question

I'm creating a simple html and svg videogame.

In this question I asked about how to do nested elements where the outer one is tilted backwards around the x axis, and the inner one is tilted forward.

nested 3d tilting

To my surprise the solution doesn't work for svg.. Why and is there some other way to achieve this effect?

Was it helpful?

Solution

SVG has no support for 3D transforms. You can transform the whole SVG (the browser renders it to an image first) but not the individual elements.

  <div id="outer">
    <svg id="inner" width="500" height="500">
      <image x="20" y="90" width="200" height="200" xlink:href='http://www.w3schools.com/html/smiley.gif' />
    </svg>
  </div>

Demo here

OTHER TIPS

The document at http://cs.sru.edu/~ddailey/svg/XYZrot3D2.svg uses separate 3D transforms for different things within one SVG. It's not working properly in Chrome, but it is in FF.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top