Javascript to access the x/y value of svg transform translate-CodePudding

Is there any built-in javascript method currently exists that can access directly x or y of svg transform =translate(x,y)?

For example a minimum sample below, I am working with a svg element

document.querySelectorAll('circle').forEach(
    (a,i)=>{
       const transformString=  a.getAttribute('transform');
       const valX = parseFloat(transformString.match(/(\d \.\d )(?=\,)|(\d )(?=\,)/gm)) 10;
       a.setAttribute('transform',`${transformString.replace(/(\d \.\d )(?=\,)|(\d )(?=\,)/gm,valX)}`)});

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script type="text/javascript" src="https://d3js.org/d3.v7.min.js"></script>

<body>
<svg xmlns="http://www.w3.org/2000/svg" height="400" width="450">
  

<circle cx="0" cy="5" r="5" transform="translate(10,20)"></circle>
<circle cx="0" cy="5" r="5" transform="translate(25,30)"></circle>
<circle cx="0" cy="5" r="5" transform="translate(17.5,32.5)"></circle>
<circle cx="0" cy="5" r="5" transform="translate(10, 50)"></circle>

</svg>
</body>

</html>

and this element contains few existing circles.

I want to grab each circle's transform=translate(x,y) x value and change it with a custom function.

I am currently doing it as follows and I want to avoid writing a regex if there is a built-in (vanilla and /d3) method exists to directly access the x or y of transform=translate

document.querySelectorAll('circle').forEach(
    (a,i)=>{
       const transformString=  a.getAttribute('transform');
       //grab the X value with regex and change as desired
       const valX = parseFloat(transformString.match(/(\d \.\d )(?=\,)|(\d )(?=\,)/gm)) 10;
       //replace existing X with new X
       a.setAttribute('transform',`${transformString.replace(/(\d \.\d )(?=\,)|(\d )(?=\,)/gm,valX)}`)});

d3 equivalent

d3.selectAll('circle')
    .attr('transform', function (d,i) {
        const transformString= this.getAttribute('transform');
        const valX = parseFloat(transformString.match(/(\d \.\d )(?=\,)|(\d )(?=\,)/gm)) 10;
        return `${transformString.replace(/(\d \.\d )(?=\,)|(\d )(?=\,)/gm,valX)}`  
    });

CodePudding user response：

document.querySelectorAll('circle').forEach(
    circle => {
       const additionalTransform = circle.ownerSVGElement.createSVGTransform();
       additionalTransform.setTranslate(10, 0);
       circle.transform.baseVal.appendItem(additionalTransform);
       // When doing this multiple times, `translate()`s might be piling up,
       // like transform="translate(10, 0) translate(10, 0) translate(10, 0)".
       // Consolidate them into a single matrix transformation.
       circle.transform.baseVal.consolidate();
    }
);