目前是否有任何内置的javascript方法可以直接访问svg transform =translate(x,y)中的xy

例如,下面的最小样本,我使用的是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>

and this element contains few existing circles. enter image description here

我想获取每个圆的transform=translate(x,y)x值,并使用自定义函数对其进行更改.

我目前的做法如下,如果有一个内置(vanilla and/d3)方法可以直接访问transform=translate中的xy,我希望避免编写regex

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)}`  
    });

推荐答案

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();
    }
);

Javascript相关问答推荐

如何从html元素创建树 struct ?

在WordPress中使用带有WPCode的Java代码片段时出现意外令牌错误

闭包是将值复制到内存的另一个位置吗?

如何创建返回不带`new`关键字的实例的类

覆盖加载器页面避免对页面上的元素进行操作

一个实体一刀VS每个实体多刀S

我想将Sitecore搜索面过滤器从多个转换为单个

传递方法VS泛型对象VS事件特定对象

在查看网页时,如何使HTML中的按钮工作方式类似于鼠标上的滚轮或箭头键?

如果NetSuite中为空,则限制筛选

P5.js中矩形内的圆弧

Refine.dev从不同的表取多条记录

如何用react组件替换dom元素?

如何在单击链接时设置一个JavaScript变量(以打开弹出窗口的特定部分)

如何从图表中映射一组图表-js使用REACT

我如何让我的弹力球在JavaScript和HTML画布中相互碰撞后改变 colored颜色 ?

在两个数组范围中输入日期范围

Redux不更新状态

呈现其他组件时无法更新组件.要定位错误的setState()调用,请遵循堆栈跟踪,如下所述

基于单击按钮更改椭圆的填充/取消填充状态,同时跟踪用户是否 Select 另一种 colored颜色