Перевод-вращение: SVG не вращается вокруг центра, хотя переведено:

getBBox возвращает ограничивающую рамку для элементов, используя их «собственные» значения, то есть до применения каких-либо преобразований. Чтобы повернуть ваш <g>, идеальным подходом было бы сначала обработать элементы в контейнере <g>, которые были преобразованы, и вернуть их экранные значения. У меня есть несколько Javascripts, которые я довольно часто использую для элементов 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")
}