3d transform perspective in svg [duplicate]

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

  •  16-07-2023
  •  | 
  •  

Domanda

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?

È stato utile?

Soluzione

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

Altri suggerimenti

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.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top