0

css を使用して、円を作成し、その半分を切り取ってから、別のクリッピング四角形を変換回転させて、25 度の円弧のみが表示されるようにすることで、「パイ ウェッジ」を作成しています。これは正常に機能します。このような 6 つの扇形が明示的に定義されている例を次に示します。

ただし、私がやりたいことは、パイのくさびを 1 つ定義してから、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);
}

この (動かない) コードの例はこちらです。私は何を間違っていますか？

4

1 に答える 1

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);
}
于 2015-02-12T19:21:50.233 に答える