Search code examples
d3.jssvgtransform

Expected ')' - SVG Transforms throwing error

I am using D3 to add attributes to a g element. I am also using D3-selection-multi to make writing the attributes easier (allows you to pass an object to .attrs() function).

using webpack and babel-preset-env

d3.select('g').attrs({
  'class': 'thing',
  'transform-origin': '50% 50%',
  'transform': `translate(${opts.w/2} ${opts.h/2}) rotate(${opts.angle}deg)`
})

I keep getting this error: attribute transform: Expected ')'

Solution

  • Turns out you can't use units in SVG transforms.

    rotate(45deg) - doesn't work and will throw an error.

    rotate(45) - expected behavior.