javascript - 平移-旋转 : SVG not rotating around center even though translated:

Question

我的绘图中有一个名为 y621 的 SVG 组，其中包含以下数据:

$('#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);

有人可以告诉我我做错了什么吗？请参阅 fiddle 进行测试

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

Answer 1

getBBox 使用其“ native ”值返回元素的边界框，即应用任何转换之前。轮换您的 <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")
}