CODEWITHSUNDEEP
csssvggraphics
amoe
amoe

Reputation: 4569

Equivalent of transform3d in SVG transforms

This question nicely tells me that transform3d from CSS isn't supported in SVG: 3d transforms on SVG element

But a commenter in the replies suggests that a combination of SVG-native rotate() and scale() transformations can be used to simulate the effect.

Here's my demo SVG:

<svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg">
  <circle id="circle1" cx="50" cy="50" r="40" stroke="red" fill="grey" />
  <circle id="circle2" cx="150" cy="50" r="4" stroke="red" fill="grey" />
</svg>

Is it possible to simulate the effect of applying the CSS transform3d(1.05, 1.05, 1.05) to #circle1, by modifying transform attributes on the SVG circle element? What would be the mathematical relationship between the x,y,z of transform3d and the 5 parameters of a combined rotate and scale? Or perhaps it's not posslble?

Upvotes: 1

Views: 380

Answers (1)

Rezenalize
Rezenalize

Reputation: 59

The transform-function now works as it does in CSS but the reference material notes syntax differences between the two and issues may exist, i.e., no guarantees. Hold the mouse down over the block for an example of rotate3d in this snippet:

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 10;
    }
        
    @keyframes transform {
        from {transform:perspective(800px) rotate3d(1,0,0,-95deg)}
        to {transform:perspective(800px) rotate3d(1,0,0, 0deg)}
    }
        
    #thing:active {
            animation: transform .8s steps(100) both;
            transform-origin: 0% 90%;
    }
    <html>
    <head>
       <link href="seat2.css" rel="stylesheet" />
    </head>
    
    <svg id="thing" xmlns="http://www.w3.org/2000/svg" width="150px" height="150px" viewBox="0 0 150 150">
        <rect width="100" height="100"/>
    </svg>
    </html>

Upvotes: 1

Related Questions