javascript - 如何在 javascript 中 cloneNode() 并转换这些 CSS 弧？

Question

我正在使用 css 制作一个“饼形楔形”，方法是制作一个圆圈，剪掉一半，然后变换旋转另一个剪裁矩形，以便只显示 25 度弧。这很好用；这里有一个明确定义了六个这样的饼楔的例子。

然而，我想做的只是定义一个饼楔，然后使用 cloneNode 通过 javascript 制作其余部分，如下所示：

for (var i = 1; i < 6; i++) {
    var el = document.getElementById('slice1');
    var child = el.cloneNode(true);
    child.id = 'newslice'+i;
    child.style.transform = "transform:rotate("+(30+i*60)+"deg)";
    el.parentNode.appendChild(child);
}

此（非工作）代码的示例在这里。我究竟做错了什么？

Answer 1

我错误地认为 cloneNode() 会克隆样式。一个可行的解决方案在这里，如下所示：

for (var i = 1; i < 6; i++) {
    var el = document.getElementById('slice1');
    var child = el.cloneNode(true);
    child.id = 'newslice'+i;
        // set the style classes for the cloned element
    child.className = " hold";
    child.children[0].className = " pie";
        // apply its transforms
    child.style.transform = "rotate("+(30+i*60)+"deg)";
    child.children[0].style.transform = "rotate(25deg)";
    el.parentNode.appendChild(child);
}