Menu
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)}`
});
618
asked Nov 05 '25 10:11
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();
}
);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
