带有JavaScript变量的SVG旋转问题

Question

有没有办法在JavaScript的旋转函数内使用变量？下面的脚本不起作用（不会分配x和y）。

var x = 20;
var y = 20;
object.children[0].setAttribute('transform','rotate(-20, x, y)');

Answer 1

setAttribute作为字符串，您可以使用字符串串联或模板文字（如下所示）。

var x = 20;
var y = 20;
object.children[0].setAttribute('transform',`rotate(-20, ${x}, ${y})`);

如上所述，这是ES6语法。下面是使用字符串连接的方法。

var x = 20;
var y = 20;
object.children[0].setAttribute('transform','rotate(-20, ' + x + ', ' + y + ')');

Answer 2

虽然使用文字或concat在适当位置构建字符串是可以的，但是如果您打算多次执行此操作，则建议创建一个用于旋转的字符串构建器函数。例如：

xyz_1