Expected ')' - SVG Transforms throwing error

Question

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 ')'

score 14 · Accepted Answer · answered Oct 05 '17 at 15:57

14

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

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

rotate(45) - expected behavior.

answered Oct 05 '17 at 15:57

Jamie S

2,029
2
13
19

If I remove units, it seems to break in Safari. Any fix for that? see: https://stackoverflow.com/questions/49576545/error-text-attribute-transform-expected-translate-50-50 – Leon Vogler Jan 11 '23 at 12:21

score -1 · Answer 2 · edited May 07 '23 at 13:53

-1

Try switching "attr" to "style"

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

edited May 07 '23 at 13:53

Brian Tompsett - 汤莱恩

5,753
72
57
129

answered Apr 28 '23 at 15:14

user21765468

1

Expected ')' - SVG Transforms throwing error

2 Answers2