Проблема ротации SVG с переменными JavaScript

Question

Есть ли способ использовать переменную внутри функции поворота в JavaScript?Скрипт ниже не работает (х и у не назначены).

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

Answer 1

Хотя сборка строки с использованием литералов или concat - это нормально, если вы планируете делать это более одного раза, я бы предложил создать функцию построения строк для rotate.Например:

function rotateStr(a, x, y) {
  return `rotate(${a}, ${x}, ${y})`
  // return 'rotate(' + x + ',' + y + ',' + z + ')' if you can't use templates
}

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

Answer 2

Поскольку 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 + ')');