javascript setAttribute 函数不允许单位答案

【问题标题】：javascript setAttribute function not allowing unitsjavascript setAttribute 函数不允许单位
【发布时间】：2014-05-01 18:46:49
【问题描述】：

当我尝试使用 javascript 设置转换属性时，我可以将没有单位的值放入其中，并且该函数运行良好。

document.getElementById("allnotes").setAttribute('transform','translate(0,10)');

但是，当我尝试放入一个单元时，该函数什么也不做。

document.getElementById("allnotes").setAttribute('transform','translate(0,10pt)');
document.getElementById("allnotes").setAttribute('transform','translate(0,10px)');
document.getElementById("allnotes").setAttribute('transform','translate(0,10%)');

如何使用 setAttribute 函数并将 % 作为我的单位而不是固定数量？而当没有指定单位时，默认使用什么单位呢？ *编辑：更多背景知识是我正在对内联 svg 文件的“g”元素进行翻译。

谢谢，

【问题讨论】：

标签： javascript svg transform percentage setattribute

【解决方案1】：

我不确定它不应该起作用 - 我已经在 FF21 上尝试过它并且它起作用了。你在什么浏览器上测试？

【讨论】：

我正在使用 Internet Explorer 11。
在 IE 9 上对我来说很好 - （我没有 IE 11）。您可以使用 getAttribute('transform'); 来检查属性值；

【解决方案2】：

你可以这样做：

/* Chrome, Safari, Opera */
document.getElementById("allnotes").style.webkitTransform = "translate(0,10%)"; 

/* IE 9 */
document.getElementById("allnotes").style.msTransform = "translate(0,10%)"; 

/* No vendor prefix */
document.getElementById("allnotes").style.transform = "translate(0,10%)";

您可以指定任何您喜欢的（有效）单位。

Fiddle

【讨论】：

谢谢。 px 和 pt 单位似乎与此解决方案配合得很好，但不是 %。当我使用 % 时，什么也没有发生。
在 Chrome 中为我工作。你确定你没有任何语法错误吗？这是更新后的fiddle。
当我查看您的小提琴代码时，它工作得很好，但是当我更改我的代码时，当我使用 .style.transform 时没有任何反应。我正在修改的是带有内联 svg 文件的“g”元素。我可以使用不带单位的 setAttribute 来做到这一点，但我想让它基于 %，因为 svg 是根据设备动态调整大小的。 .style.transform 不适用于 svg 元素吗？
我认为您应该使用 IE 的供应商前缀：style.msTransform，但恐怕我在 Linux 上，因此测试可能会出现问题。你能不能在我们可以看到它不起作用的地方做一个小提琴？
杰克，花了一点时间才弄清楚小提琴，但这是我正在使用的代码。 jsfiddle.net/slayerofgiants/3j2WR/14 尝试输入单位时的转换/翻译错误。