javascript - 我如何在 javascript 中克隆 Node() 并转换这些 CSS 弧线？

Question

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

然而，我想做的只是定义一个饼形楔形，然后使用 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);
}

此(非工作)代码的示例是 here .我做错了什么？

Answer 1

我错误地认为 cloneNode() 会克隆样式。一个可行的解决方案是 here看起来像这样:

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);
}