Geek Answers Handbook

Rotate an oval SVG object

I am trying to animate an oval-shaped image to rotate at a fixed angle, so that the outline rotates around the area without changing the shape of the area.

How can I do it? Can I use only one image or do I need several small images in an oval shape?

This is what I did ( jsfiddle ), as you can see that the area changes shape according to the rotation

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <image x="20" y="20" width="300" height="80" xlink:href="http://i.imgur.com/gTlsQx4.png"> <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 180 50" to="360 180 50" dur="4s" repeatCount="indefinite"/> </image> </svg>

Image for clarity

+5
source share
3 answers

I am not a graphic genius, but I am sure that this cannot be done with what you have. If you remove the animation and view the PNG itself, you will notice that the mechanism is already distorted in a fixed, two-point perspective - the equipment extends from us, the viewer.

But the image itself is 2D, and no matter how you rotate it in SVG or CSS or Canvas, the mechanism will always stretch the same.

If there is a solution, this will require some serious image distortion at key points in the animation, and performing distortions on a rasterized image will always degrade visual accuracy.

Here are a few alternatives:

  • There's a nice old standby mode: GIF animation of a 3D animation of a gear performing a complete rotation.
  • You can cut 3D animation into a series of 2D frames, then split them into a sprite sheet and then animate it using JavaScript.
  • You can use flash.
  • You can experiment with WebGL.
+3
source

Funny question. I solved this by flipping the outer container using the transform matrix, and then rotating the inner image. Your svg animation is awkward for you, so I used a different font from font:

http://jsfiddle.net/psd32q68/2/

 div{ font-size:84px; margin-top:50px; margin-left:150px; transform: matrix3d(0,-0.5,1.00,0,0.50,0.87,0.00,.003,-1,0,0,0,0,0,0,1); -webkit-transform: matrix3d(0,-0.5,1.00,0,0.50,0.87,0.00,.003,-1,0,0,0,0,0,0,1); -moz-transform: matrix3d(0,-0.5,1.00,0,0.50,0.87,0.00,.003,-1,0,0,0,0,0,0,1); -o-transform: matrix3d(0,-0.5,1.00,0,0.50,0.87,0.00,.003,-1,0,0,0,0,0,0,1); -ms-transform: matrix3d(0,-0.5,1.00,0,0.50,0.87,0.00,.003,-1,0,0,0,0,0,0,1); } span{ -webkit-animation:spin 4s linear infinite; -moz-animation:spin 4s linear infinite; animation:spin 4s linear infinite; } @-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } } @-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } } @keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

-

  <div> <span class="fa fa-cog"></span> </div>
+1
source

As others have said, your screw is drawn in perspective, so you cannot use normal rotation and expect it to look right.

What you need to do is draw the SVG as a flat screw, and then you can use the 3D CSS transform to add a perspective projection to the rotating cog.

Here is a working example:

 svg { margin: 100px; transform: matrix3d(0.9, 0.17, 0, 0, 0.01, 2.4, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); -webkit-transform: matrix3d(0.9, 0.17, 0, 0, 0.01, 2.4, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); -moz-transform: matrix3d(0.9, 0.17, 0, 0, 0.01, 2.4, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); -o-transform: matrix3d(0.9, 0.17, 0, 0, 0.01, 2.4, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); -ms-transform: matrix3d(0.9, 0.17, 0, 0, 0.01, 2.4, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 
 <svg width="100" height="100" viewBox="0 0 100 100"> <g stroke="black" fill="none" transform="translate(50,50)"> <g> <circle r="38" stroke-width="8"/> <line x1="38" x2="49" stroke-width="16"/> <line x1="38" x2="49" stroke-width="16" transform="rotate(45)"/> <line x1="38" x2="49" stroke-width="16" transform="rotate(90)"/> <line x1="38" x2="49" stroke-width="16" transform="rotate(135)"/> <line x1="38" x2="49" stroke-width="16" transform="rotate(180)"/> <line x1="38" x2="49" stroke-width="16" transform="rotate(225)"/> <line x1="38" x2="49" stroke-width="16" transform="rotate(270)"/> <line x1="38" x2="49" stroke-width="16" transform="rotate(315)"/> <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0" to="360" dur="4s" repeatCount="indefinite"/> </g> </g> </svg>
0
source

More articles:


All Articles