Как я могу cloneNode() и преобразовать эти дуги CSS в JavaScript?

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