Get New path after applying the translate rotate and scale on arc SVG - svg

Question

I want to get new Path (Arc) point after applying the translate rotate and scale on the path .
I am Putting an example:
MY Path is shown like This
AS You seen Translate ,rotate and scale is applied on my path.
I am using this code for getting new path with translate(0,0) rotate(0,0,0) and scale(0,0) I am using matrixTransform(sCTM) method to get new point in the case of line after applying new transform and scale.
But in the case of arc i am not getting the right 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.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

IN the case of line the Matrix return 2 value x point and y point .
but in the case of arc the matrix retuen 6 value cx cy rotation
swepflag largefalg x y. in this code first i check path is arc or line
if line then add the x,y coordinate only but in the case of arc i add
all 6 point to the make new path arc 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)");