在弧 SVG 上应用平移旋转和缩放后获取新路径

Question

我想在路径上应用平移旋转和缩放后获得新的路径（弧）点。 我举个例子：

我的路径是这样显示的

如你所见，我的路径上应用了翻译、旋转和缩放。

我正在使用此代码通过 translate(0,0) rotate(0,0,0) 和 scale(0,0) 获取新路径 我使用 matrixTransform(sCTM) 方法来获取新点应用新的变换和缩放后的线。 但是在弧的情况下，我没有找到正确的路径。

var path = d3.select("g")[0][0]; // Get g tag
            var d = "";
            // console.log(path.select('path').getAttr('d'));
            var sCTM = path.getCTM(); // get transform data
            var svgRoot = path.ownerSVGElement // get svg tag
            var pathId = d3.select("g path")[0][0]; // get path
            var segList = pathId.pathSegList // 
            var segs = segList.numberOfItems
                //---change segObj values
                // create D after apply transform elements
            for (var k = 0; k < segs; k++) {
                var segObj = segList.getItem(k)
                if (segObj.x && segObj.y) {
                    var mySVGPoint = svgRoot.createSVGPoint();
                    mySVGPoint.x = segObj.x
                    mySVGPoint.y = segObj.y
                    mySVGPointTrans = mySVGPoint.matrixTransform(sCTM)
                    console.log("testing my object",mySVGPointTrans);
                    segObj.x = mySVGPointTrans.x;
                    segObj.y = mySVGPointTrans.y;
                    d = d + segObj.pathSegTypeAsLetter + mySVGPointTrans.x + "," + mySVGPointTrans.y; 
                }
            }
            d3..select("g").select("path").attr("d",d);
            //---force removal of transform--
            path.setAttribute("transform", "translate(0,0)rotate(0,0,0)skewX(0)scale(1,1)");

Answer 1

在行的情况下，矩阵返回 2 个值 x 点和 y 点。 但在 arc 的情况下，矩阵 retuen 6 值 cx cy 旋转 扫描标志 largefalg x y。在这段代码中，我首先检查路径是弧还是线 if line 然后只添加 x,y 坐标，但在 arc 的情况下我添加 所有 6 点都指向 make new path 弧路径。

var path = d3..select("g")[0][0]; // Get g tag
                    var d = "";
                    // console.log(path.select('path').getAttr('d'));
                    var sCTM = path.getCTM(); // get transform data
                    var svgRoot = path.ownerSVGElement // get svg tag
                    var pathId = d3.select("g path")[0][0]; // get path
                    var segList = pathId.pathSegList // 
                    var segs = segList.numberOfItems
                        //---change segObj values
                        // create D after apply transform elements
                    for (var k = 0; k < segs; k++) {
                        var segObj = segList.getItem(k)
    if(segObj.pathSegTypeAsLetter != "A" && segObj.pathSegTypeAsLetter !="a") {``
                        if (segObj.x && segObj.y) {
                            var mySVGPoint = svgRoot.createSVGPoint();
                            mySVGPoint.x = segObj.x
                            mySVGPoint.y = segObj.y
                            mySVGPointTrans = mySVGPoint.matrixTransform(sCTM)
                            console.log("testing my object",mySVGPointTrans);
                            segObj.x = mySVGPointTrans.x;
                            segObj.y = mySVGPointTrans.y;
                            d = d + segObj.pathSegTypeAsLetter + mySVGPointTrans.x + "," + mySVGPointTrans.y; 
                        }
                    } else {
                        // to check the arc have rotation value of x and y 
                        if (segObj.x && segObj.y && segObj.r1 && segObj.r2) {
                            var mySVGPoint = svgRoot.createSVGPoint();
                            mySVGPoint.x = segObj.x
                            mySVGPoint.y = segObj.y
                            mySVGPoint.r1 = segObj.r1
                            mySVGPoint.r2 = segObj.r2
                            mySVGPoint.angle = segObj.angle 
                            mySVGPoint.largeArcFlag = segObj.largeArcFlag
                            mySVGPoint.sweepFlag =  segObj.sweepFlag;
                            mySVGPointTrans = mySVGPoint.matrixTransform(sCTM)
                            segObj.x = mySVGPointTrans.x
                            segObj.y = mySVGPointTrans.y
                            var largeFlag = segObj.largeArcFlag ? 1 : 0 ;
                            var sweepFlag = segObj.sweepFlag ? 0 : 1;
                            //add all parameter when arc 
                            d = d + segObj.pathSegTypeAsLetter + segObj.r1 + "," + segObj.r2 + " " +  segObj.angle + " " + largeFlag + " " + sweepFlag + " " +  mySVGPointTrans.x +  "," + mySVGPointTrans.y; 
                        }

                    }
                }
                    d3..select("g").select("path").attr("d",d);
                    //---force removal of transform--
                    path.setAttribute("transform", "translate(0,0)rotate(0,0,0)skewX(0)scale(1,1)");