我们如何在 .setAttribute 中同时添加变换旋转和缩放

【问题标题】：How we can add transform rotate and scale simultaneously in .setAttribute我们如何在 .setAttribute 中同时添加变换旋转和缩放
【发布时间】：2021-05-19 11:10:38
【问题描述】：

我正在处理 SVG，我想添加缩放和旋转变换。旋转值是动态的，缩放值是恒定的。

我试过这样：

boxElem.setAttribute("transform", "rotate(" + rotation + "), scale(0.9)");

它不工作。只有比例值有影响。谁能告诉我如何在 JS 中的 transform 中添加多个属性。

【问题讨论】：

标签： javascript jquery ecmascript-6 ecmascript-2016

【解决方案1】：

setAttribute 将导致添加属性transform，如下所示：

<div transform="rotate(rotation) scale(0.9)"></div>

你需要更新元素的style：

boxElem.style.transform = "rotate(" + rotation + ") scale(0.9)";

【讨论】：

它工作正常。在 setAttribute boxElem.setAttribute("transform", "rotate(" + rotation + ") scale(0.9)"); 中，我在旋转后删除了逗号，这也有效。