Cross-platform SVG rotation animation:

Question

Hi I am currently working with some SVG animations that are to work on multiple platforms.

However I have an issue with Internet Explorer (of course).

I use Keith Woods, Jquery SVG extension.

I have mainly been using layers and show, hide to animate my pages but now I need to do a rotation of a line:

        $('#topBar').stop().animate({
            svgTransform: 'rotate('+angle+','+(545+amplification)+',-260)'}, time);

The SVG object:

<g
   id="g3953">
  <path
     sodipodi:nodetypes="cc"
     inkscape:connector-curvature="0"
     id="topBar"
     d="m 545,-260 322,0"
     style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
  <rect
     y="-260"
     x="545"
     height="5"
     width="5"
     id="centerPoint"
     style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:10;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />
</g>

This partly works but the line called top bar rotates and translates in another manor than on Chrome and Firefox. I.e. it jumps around a little.

Anybody have a solution to this? can i do the translation differently or just use CSS- or other JQuery rotate method to get better support??

I have seen JQuery rotate but does it support translation?

See how the image jumps, below, this occurs when I just moved the point of rotation...

You may fiddle with the code...

Answer 1

IE does not support animations in SVG. The basic way to rotate across all browsers is to use the getBBox() for the container and rotate from the center of the bounding box. As Follows:

<svg id="mySVG" width=400" height="400">
<g id="containerG">
<polygon id="myPolygon" fill="yellow" stroke="blue" stroke-width="1" points="380,80 200,10 40,80 100,320 300,350" />
<circle id="myCircle" cx="170" cy="200" r="40" fill="lime" />
</g>

var deg=30
var bb=containerG.getBBox()
var bbx=bb.x
var bby=bb.y
var bbw=bb.width
var bbh=bb.height
var cx=bbx+.5*bbw
var cy=bby+.5*bbh
containerG.setAttribute("transform","rotate("+deg+" "+cx+" "+cy+")")

From personal experience, animations are not meaningfull to me in most svg applications. However, what is important, are transitions. By transitions, I mean the smooth movement of a graphic element's attributes as they visually change. I think currently the best cross-browser handling of svg transitions is by D3. The D3 api may be more than you want to get into at this time...But if you plan to work seriously with svg, you should give it a try.