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

Question

希望有人知道该怎么做并能帮助我：

函数执行此操作：

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;
}

其中 "s" 是这样的： s = 'matrix(' + matrix.a + ',' + matrix.b + ',' + matrix.c + ',' + matrix.d + ',' + matrix.e + ',' + matrix.f + ')'

它与此完美搭配。对于硬件加速，我想将 + ' translateZ(0)' 添加到 "s"。

执行此操作后出现以下错误：

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

我也试过不带“+”直接连接。也许有人知道我做错了什么。

更新

我将 "s" 更改为： s = 'matrix3d(' + matrix.a + ',' + matrix.b + ',' + 0 + ',' + 0 + ',' + matrix.c + ',' + matrix.d + ',' + 0 + ',' + 0 + ',' + 0 + ',' + 0 + ',' + 1 + ',' + 0 + ',' + matrix.e + ',' + matrix.f + ',' + 0 + ',' + 1 + ')';因为一个同事的想法。

不幸的是同样的错误：

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

Answer 1

错误来自您设置属性的第一行。 transform SVG 元素的属性与 CSS 中的 transform 样式有点不同，they do not support translateZ. style.transform 之后的所有内容应该没问题。

Answer 2

所以我知道我的问题是什么。除了 matrix() 或 matrix3d()

之外不能使用任何东西

Answer 3

我不小心输入时遇到了完全相同的错误

.attr("transform", `matrix3d(${this.transformToArray(matrix)})`)

而不是

.style("transform", `matrix3d(${this.transformToArray(matrix)})`)

在 D3 中。请注意，该错误与转换无关，而与 D3 函数有关。只是为了帮助使用 D3 的人找到这个 post :)

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

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

javascript

css

svg

css-transforms