跨平台 SVG 旋转动画：

Question

您好，我目前正在处理一些可在多个平台上运行的 SVG 动画。

但是我在使用 Internet Explorer 时遇到了问题（当然）。

我使用Keith Woods, Jquery SVG extension。

我一直主要使用图层和显示、隐藏来为我的页面设置动画，但现在我需要对线条进行旋转：

        $('#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。它会跳动一点。

有人有解决办法吗？我可以用不同的方式进行翻译，还是只使用 CSS- 或其他 JQuery 旋转方法来获得更好的支持？？

我看过JQuery rotate，但它支持翻译吗？

看看图片是怎么跳的，下图，这是我刚移动旋转点的时候发生的……

您可以使用代码fiddle...

Answer 1

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

<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，你应该试一试。