Geek Answers Handbook

3D SVG rotation

I need to rotate the paths in my SVG document around an arbitrary point in 3D. It seems that there are several ways to do this using either the 4x4 transform matrix, or rotateX or rotateY transforms. I tried both of these methods and none of them work. Are they supported anywhere?

For my application, the bitmap will be the final result, so I'm not worried about browser support. I am open to any tool - I can run a specific browser through selenium or use the standalone SVG rasterizer.

This is what I have tried so far (using Google Chrome 31):

I expect it to be a black rectangle rotated around the X axis and appearing as a trapezoid.

<svg version="1.1" 
     xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink" width="640px" height="480px">

    <rect x="100" y="100" width="440" height="280" fill="#000000" 
          transform="rotateX(30 580 100)"></rect>
</svg>

(exception cyand czfrom rotateXgives the same result).

I also tried with a 4x4 matrix. I do not see any difference from above. I also doubt that my math is correct in finding the right matrix elements.

<svg version="1.1" 
     xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink" width="640px" height="480px">

    <rect x="100" y="100" width="440" height="280" fill="#000000" 
          transform="matrix(102400 0 0 0 0 88681.00134752653 -159.99999999999997 1387899.8652473476 0 159.99999999999997 88681.00134752653 -15986.602540378442)"></rect>
</svg>
+4
source share
2 answers

I found that in SVG there really is no way to do 3D rotation, which is supported in any modern browser (as far as I know). However, CSS3 has a similar transform property.

The following works for me:

<svg version="1.1" 
     xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink" width="640px" height="480px">

    <rect x="100" y="100" width="440" height="280" fill="#000000" style="-webkit-transform: rotateX(30); -webkit-transform-origin-y: 580px; -webkit-transform-origin-z: 100"></rect>
</svg>

This is obviously not a good cross-browser solution (as it uses prefix properties), but it is not what I need in my application.

+3
source

. https://www.w3schools.com/css/css3_3dtransforms.asp: , CSS {transform: rotateX (## deg)} -Y -Z . , , . : {transform: rotate3d (x, y, z, angle)}, . , ...

0

More articles:


All Articles