跨平台SVG旋转动画: [英] Cross-platform SVG rotation animation:

问题描述

我目前正在处理一些可以在多个平台上使用的SVG动画.

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

但是我的Internet Explorer存在一个问题(当然).

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

我使用 Keith Woods，Jquery SVG扩展.

我主要使用图层并显示，隐藏动画页面，但是现在我需要旋转线条:

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);

SVG对象:

<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>

这部分起作用，但是顶部栏的线在Chrome和Firefox中的另一种庄园中旋转和平移. IE.它会跳一点.

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.

有人对此有解决方案吗?我可以做不同的翻译还是只使用CSS-或其他JQuery旋转方法以获得更好的支持?

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??

我见过 jQuery旋转，但是它支持翻译吗?

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...

推荐答案

IE不支持SVG中的动画.在所有浏览器中旋转的基本方法是对容器使用 getBBox()并从边界框的中心旋转.如下:

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+")")

根据个人经验，在大多数svg应用程序中，动画对我而言并不有意义.但是，重要的是过渡.过渡是指图形元素的属性在视觉上发生变化时的平滑移动.我认为，目前对SVG过渡最好的跨浏览器处理方法是D3. D3 api可能比您现在想了解的更多...但是如果您打算认真使用svg，则应该尝试一下.

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.

这篇关于跨平台SVG旋转动画:的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！