javascript當前是否存在可以直接訪問x或訪問y的內置方法svg transform =translate(x,y)？
例如下面的最小示例，我正在使用一個svg元素
顯示代碼片段
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>并且這個元素包含很少的現有圈子。
我想獲取每個圓圈的transform=translate(x,y) x值并使用自定義函式對其進行更改。
我目前正在執行以下操作，如果存在直接訪問or的regex內置（vanilla 和 /d3）方法，我想避免撰寫xytransform=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相等的
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)}`
});
uj5u.com熱心網友回復：
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();
}
);
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/476963.html
標籤：javascript svg d3.js
上一篇：CSS增加svg字體大小自定義