Search code examples
javascriptcsssvgcss-transforms

Error: <g> attribute transform: Expected '('

Hope someone knows what to do and can help me:

A function does this:

element.setAttributeNS(null, 'transform', s);
if ('transform' in element.style) {
  element.style.transform = s;
} else if ('-ms-transform' in element.style) {
  element.style['-ms-transform'] = s;
} else if ('-webkit-transform' in element.style) {
  element.style['-webkit-transform'] = s;
}

where "s" is this: s = 'matrix(' + matrix.a + ',' + matrix.b + ',' + matrix.c + ',' + matrix.d + ',' + matrix.e + ',' + matrix.f + ')'

It works perfect with this. For hardware acceleration I want to add + ' translateZ(0)' to "s".

After doing this I get the following error:

Error: < g> attribute transform: Expected '(', "…39394) translateZ(0)".

I also tried it without the "+" and directly connected. Maybe someone know what I'm doing wrong.

UPDATE

I changed "s" to: s = 'matrix3d(' + matrix.a + ',' + matrix.b + ',' + 0 + ',' + 0 + ',' + matrix.c + ',' + matrix.d + ',' + 0 + ',' + 0 + ',' + 0 + ',' + 0 + ',' + 1 + ',' + 0 + ',' + matrix.e + ',' + matrix.f + ',' + 0 + ',' + 1 + ')'; because of an idea of a co-worker.

unfortunately same error:

Error: < g> attribute transform: Expected '(', "matrix3d(2.03961675842…".

Solution

  • The error comes from the first line, where you set the attribute. transform attributes on SVG elements are a bit different from transform styles in CSS, and they do not support translateZ. All the stuff afterwards on style.transform should be fine.