翻譯轉：SVG不是圍繞中心旋轉，即使翻譯：

Question

我有我的畫在SVG組名爲數據如下y621：

$('#y621')[0].getBBox() 
SVGRect {height: 10.6065673828125, width: 10.60662841796875, y: 1088.701171875, x: 890.8260498046875} 

y621由與一個圓/路徑線的中心：

<g 
    id="y621" 
    inkscape:label="#g6834"> 
    <path 
    inkscape:label="#path4497" 
    sodipodi:nodetypes="cc" 
    inkscape:connector-curvature="0" 
    id="y6" 
    d="m 890.82605,1088.7012 10.6066,10.6066" 
    style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" /> 
    <path 
    transform="translate(400.00435,674.62953)" 
    d="m 496.25,418.625 a 0.75,0.75 0 1 1 -1.5,0 0.75,0.75 0 1 1 1.5,0 z" 
    sodipodi:ry="0.75" 
    sodipodi:rx="0.75" 
    sodipodi:cy="418.625" 
    sodipodi:cx="495.5" 
    id="path4499" 
    style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:1;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0" 
    sodipodi:type="arc" /> 
</g> 

我想旋轉它的中心。然而我不能正確的。它只是飛越了這個地方。我現在用的是Jquery SVG：

$('#y621').animate({svgTransform:'rotate(360, 891,1088)'},1000); 

有人能告訴我什麼，我做錯了什麼？用於測試

http://jsfiddle.net/devdavid/4FC96/3/

Answer 1

getBBox返回使用他們的「天然」值的元素的邊界框看到小提琴，即施加之前任何tranformations。要旋轉<g>，理想的方法是首先處理已轉換的<g>容器中的元素，並返回其屏幕值。 我有幾個JavaScript，我發現我經常使用svg元素將它們返回到它們的屏幕點。試一試，看看他們是否有所幫助。

//----use your SVG root(svg as below) to hold svg point--- 
function screenLine(line,svg) 
{ 
    var sCTM = line.getCTM() 
    var x1=parseFloat(line.getAttribute("x1")) 
    var y1=parseFloat(line.getAttribute("y1")) 
    var x2=parseFloat(line.getAttribute("x2")) 
    var y2=parseFloat(line.getAttribute("y2")) 

    var mySVGPoint1 = svg.createSVGPoint(); 
    mySVGPoint1.x = x1 
    mySVGPoint1.y = y1 
    mySVGPointTrans1 = mySVGPoint1.matrixTransform(sCTM) 
    line.setAttribute("x1",mySVGPointTrans1.x) 
    line.setAttribute("y1",mySVGPointTrans1.y) 

    var mySVGPoint2 = svg.createSVGPoint(); 
    mySVGPoint2.x = x2 
    mySVGPoint2.y = y2 
    mySVGPointTrans2= mySVGPoint2.matrixTransform(sCTM) 
    line.setAttribute("x2",mySVGPointTrans2.x) 
    line.setAttribute("y2",mySVGPointTrans2.y) 
    //---force removal of transform-- 
    line.setAttribute("transform","") 
    line.removeAttribute("transform") 
} 
function screenCircle(circle,svg) 
{ 
    var sCTM = circle.getCTM() 
    var scaleX = sCTM.a; 

    var cx=parseFloat(circle.getAttribute("cx")) 
    var cy=parseFloat(circle.getAttribute("cy")) 

    var r=parseFloat(circle.getAttribute("r")) 

    var mySVGPointC = svg.createSVGPoint(); 
    mySVGPointC.x = cx 
    mySVGPointC.y = cy 
    mySVGPointTransC = mySVGPointC.matrixTransform(sCTM) 
    circle.setAttribute("cx",mySVGPointTransC.x) 
    circle.setAttribute("cy",mySVGPointTransC.y) 

    circle.setAttribute("r",r*scaleX) 
    //---force removal of transform-- 
    circle.setAttribute("transform","") 
    circle.removeAttribute("transform") 
} 
function screenEllipse(ellipse,svg) 
{ 
    var sCTM = ellipse.getCTM() 
    var scaleX = sCTM.a; 
    var scaleY = sCTM.d; 

    var cx=parseFloat(ellipse.getAttribute("cx")) 
    var cy=parseFloat(ellipse.getAttribute("cy")) 

    var rx=parseFloat(ellipse.getAttribute("rx")) 
    var ry=parseFloat(ellipse.getAttribute("ry")) 

    var mySVGPointC = svg.createSVGPoint(); 
    mySVGPointC.x = cx 
    mySVGPointC.y = cy 
    mySVGPointTransC = mySVGPointC.matrixTransform(sCTM) 
    ellipse.setAttribute("cx",mySVGPointTransC.x) 
    ellipse.setAttribute("cy",mySVGPointTransC.y) 

    ellipse.setAttribute("rx",rx*scaleX) 
    ellipse.setAttribute("ry",ry*scaleY) 

    //---force removal of transform-- 
    ellipse.setAttribute("transform","") 
    ellipse.removeAttribute("transform") 
} 
function screenRect(rect,svg) 
{ 
    var sCTM = rect.getCTM() 
    var scaleX = sCTM.a; 
    var scaleY = sCTM.d; 

    var x=parseFloat(rect.getAttribute("x")) 
    var y=parseFloat(rect.getAttribute("y")) 

    var width=parseFloat(rect.getAttribute("width")) 
    var height=parseFloat(rect.getAttribute("height")) 

    var mySVGPoint = svg.createSVGPoint(); 
    mySVGPoint.x = x 
    mySVGPoint.y = y 
    mySVGPointTrans = mySVGPoint.matrixTransform(sCTM) 
    rect.setAttribute("x",mySVGPointTrans.x) 
    rect.setAttribute("y",mySVGPointTrans.y) 

    rect.setAttribute("width",width*scaleX) 
    rect.setAttribute("height",height*scaleY) 

    //---force removal of transform-- 
    rect.setAttribute("transform","") 
    rect.removeAttribute("transform") 
} 
function screenPolyline(myPoly,svg) 
{ 
    var sCTM = myPoly.getCTM() 
    var pointsList = myPoly.points; 
    var n = pointsList.numberOfItems; 
    for(var m=0;m<n;m++) 
    { 
     var mySVGPoint = mySVG.createSVGPoint(); 
     mySVGPoint.x = pointsList.getItem(m).x 
     mySVGPoint.y = pointsList.getItem(m).y 
     mySVGPointTrans = mySVGPoint.matrixTransform(sCTM) 
     pointsList.getItem(m).x=mySVGPointTrans.x 
     pointsList.getItem(m).y=mySVGPointTrans.y 
    } 
    //---force removal of transform-- 
    myPoly.setAttribute("transform","") 
    myPoly.removeAttribute("transform") 
} 

function screenPath(path,svg) 
{ 
    var sCTM = path.getCTM() 
    var scaleX = sCTM.a; 
    var scaleY = sCTM.d; 

    var segList=path.pathSegList 
    var segs=segList.numberOfItems 
    //---change segObj values 
    for(var k=0;k<segs;k++) 
    { 
     var segObj=segList.getItem(k) 

     if(segObj.x && segObj.y) 
     { 
      var mySVGPoint = svg.createSVGPoint(); 
      mySVGPoint.x = segObj.x 
      mySVGPoint.y = segObj.y 
      mySVGPointTrans = mySVGPoint.matrixTransform(sCTM) 
      segObj.x=mySVGPointTrans.x 
      segObj.y=mySVGPointTrans.y 
     } 

     if(segObj.x1 && segObj.y1) 
     { 
      var mySVGPoint1 = svg.createSVGPoint(); 
      mySVGPoint1.x = segObj.x1 
      mySVGPoint1.y = segObj.y1 
      mySVGPointTrans1 = mySVGPoint1.matrixTransform(sCTM) 
      segObj.x1=mySVGPointTrans1.x 
      segObj.y1=mySVGPointTrans1.y 
     } 
     if(segObj.x2 && segObj.y2) 
     { 
      var mySVGPoint2 = svg.createSVGPoint(); 
      mySVGPoint2.x = segObj.x2 
      mySVGPoint2.y = segObj.y2 
      mySVGPointTrans2 = mySVGPoint2.matrixTransform(sCTM) 
      segObj.x2=mySVGPointTrans2.x 
      segObj.y2=mySVGPointTrans2.y 
     } 

     if(segObj.r1)segObj.r1=segObj.r1*scaleX 
     if(segObj.r2)segObj.r2=segObj.r2*scaleX 
    } 
    //---force removal of transform-- 
    path.setAttribute("transform","") 
    path.removeAttribute("transform") 
} 

//---changes all transformed points to screen points--- 
function screenPolygon(myPoly,mySVG) 
{ 
    var sCTM = myPoly.getCTM() 
    var pointsList = myPoly.points; 
    var n = pointsList.numberOfItems; 
    for(var m=0;m<n;m++) 
    { 
     var mySVGPoint = mySVG.createSVGPoint(); 
     mySVGPoint.x = pointsList.getItem(m).x 
     mySVGPoint.y = pointsList.getItem(m).y 
     mySVGPointTrans = mySVGPoint.matrixTransform(sCTM) 
     pointsList.getItem(m).x=mySVGPointTrans.x 
     pointsList.getItem(m).y=mySVGPointTrans.y 
    } 
    //---force removal of transform-- 
    myPoly.setAttribute("transform","") 
    myPoly.removeAttribute("transform") 
}