错误：<g> 属性转换：预期为 '('答案

【问题标题】：Error: <g> attribute transform: Expected '('错误：<g> 属性转换：预期为 '('
【发布时间】：2018-09-23 20:19:54
【问题描述】：

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

一个函数会这样做：

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”。

执行此操作后，我收到以下错误：

错误：属性转换：预期为 '(', "…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 + ')'; 因为一个同事的想法。

不幸的是同样的错误：

错误：属性转换：应为 '(', "matrix3d(2.03961675842..."。

【问题讨论】：

当使用矩阵时，我猜你不能附加其他东西
正如@TemaniAfif 提到的，您确定可以在矩阵后面附加translateZ() 吗？
@zeropublix 不，我不确定：/ 我刚刚读到它，他们说它有效。 “由于我不是专业人士，我不确定这是正确的方法。
啊，你应该添加 SVG 标签...现在我在标题中看到了 g
@TemaniAfif 在哪里添加 svg 标签？

标签： javascript css svg css-transforms

【解决方案1】：

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

【讨论】：

你能告诉我要改变什么还是只是错了，我不能像我想的那样做？
@breezertwo 为什么需要这个属性，难道样式不能自己做吗？
我不知道你想从我这里知道什么。这整件事来自一个 JS 插件。我必须像这样使用它。但由于在手机上运行速度非常慢，我想尝试强制硬件加速并使用 3D 渲染。
@breezertwo AFAIK translateZ(0) 技巧仅对尚未进行转换的元素有用。您的矩阵变换应自行触发硬件加速。
不要在 translateZ 技巧上浪费时间，现代浏览器已经学会了如何通过正常方式应用硬件加速

【解决方案2】：

所以我知道我的问题是什么。除了matrix() 或matrix3d() 之外，不能使用任何东西

【讨论】：

【解决方案3】：

我不小心输入了同样的错误

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

而不是

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

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

【讨论】：