Javascript 在逗号之间的括号内提取值(增加元素的转换函数参数)

Question

这里的上下文很简单，我想从图形元素中捕获 transform css 值并将其增加 10。

在我的例子中，我唯一的转换是翻译，但理想情况下，如果有其他转换，它也能工作，而且我只想更改翻译值。

我将其标记为正则表达式，但不确定是否需要它。

const myElement = document.getElementById('myElement');
const translateString = myElement.getAttribute('transform');
const newTranslateString = increaseArgumentsBy10(translateString);
myElement.setAttribute('transform', newTranslateString);


function increaseArgumentsBy10(translateString) {
  console.log('To be implemented');
  return translateString;
}

<svg>
  <text id="myElement" transform="translate(50,50)">My Element
  </text>
</svg>

Answer 1

你可以创建一个函数 translate 并使用 eval

const myElement = document.getElementById('myElement');
const translateString = myElement.getAttribute('transform');
const newTranslateString = increaseArgumentsBy10(translateString);
myElement.setAttribute('transform', newTranslateString);


function increaseArgumentsBy10(translateString) {
  function translate(x, y) {
   	return('translate(' + (x + 10) + ', ' + (y + 10) + ')'); 
  }
  return eval(translateString);
}

<svg>
  <text id="myElement" transform="translate(50,50)">My Element
  </text>
</svg>