跨平台SVG旋轉動畫：

Question

嗨，我目前正在處理一些可以在多個平台上使用的SVG動畫。

但是我的Internet Explorer（當然）有問題。

我使用Keith Woods，Jquery SVG擴展名 。

我主要使用圖層並顯示，隱藏來為頁面設置動畫，但是現在我需要旋轉線條：

        $('#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的其他庄園中旋轉和平移。 即它跳了一下。

有人對此有解決方案嗎？ 我可以做不同的翻譯還是只使用CSS-或其他JQuery旋轉方法以獲得更好的支持？

我見過JQuery旋轉，但它支持翻譯嗎？

看看下面的圖像是如何跳躍的，這是我剛移動旋轉點時發生的...

您可能會擺弄代碼...

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，則應該嘗試一下。