使用 getAttribute 时如何检索翻译属性的转换值？答案

【问题标题】：How do I retrirve the transform value of a translate attribute when using getAttribute?使用 getAttribute 时如何检索翻译属性的转换值？
【发布时间】：2014-06-03 04:37:49
【问题描述】：

使用 getAttribute 时如何检索 translate 属性的转换值？

如果我使用 setAttribute 所以在一个对象上创建一个转换，如下面的代码，

document.getElementById("Dots").setAttribute('transform','translateY(100)');

我以后如何使用.getAttribute('transform'); 仅检索翻译值

使用getAttribute 仅检索最后一个转换。我只想要translateY() 的值。

http://jsfiddle.net/slayerofgiants/4v7Yn/3/

任何想法我可以如何去完成这个？谢谢， --克里斯托弗

【问题讨论】：

你将Dots 转换属性设置为skewX(60)。设置transform 属性后，您的期望是什么？

标签： javascript html svg transform getattribute

【解决方案1】：

您的第二个语句会覆盖第一个语句，因此您永远不会获得 translateY 值。

见UPDATED DEMO HERE

document.getElementById("Dots").setAttribute('transform','translateY(100) skewX(60)');
alert(document.getElementById("Dots").getAttribute('transform').split(' ',1));

然后您可以使用split() 来获取您想要的特定值。

【讨论】：

我特别想要 y 平移值，发现我可以从 getCTM 获取所有变换值。 document.getElementById("Dots").getCTM().f; F 是 Y 平移值，F/A 给出平移的实际 Y 值。事实证明我不需要使用.split。