格旋轉，但div的裁剪框不

試圖建立沒有JS庫（如拉斐爾）這個整潔的小計，我想出了你可以找到here的問題。經過很多挫折之後，我想到了另一種佈局，它可以讓這個電錶工作（這個電路可以解決一個已知的Chrome問題），可以在上面的提琴中看到。

<div id="clipper"> 
    <div id="round"> 
    </div> 
    <div id="clipper2"> 
     <div id="meter"></div> 
    </div> 
</div>

但是，這創造了一個全新的Android（至少4.0.4）瀏覽器缺陷。剪輯框div元素按預期旋轉。但是，實際計算的剪裁框具有水平和垂直邊界，其包含可見形狀。實質上，這意味着子元素始終是正方形的，而不是沿着元素的旋轉邊。

電錶本身有一些不尋常的要求，否則這將更容易做到：它不是一個完整的半個圓，而是一個圓弧頂部的切片。它也必須圍繞此切片的點底部中心旋轉，而不是圓的中心。

來源

2013-12-18 Randy Hall

嘗試用SVG：http://jsfiddle.net/8fsS2/4/

HTML：

<svg id="generate" version="1.1" xmlns="http://www.w3.org/2000/svg" 
    width="500px" height="120px" viewBox="0 0 200 120" preserveAspectRatio="none"> 
     <g id="chart"></g> 
</svg>

的Javascript：

function deg2rad(deg) { 
     return deg * Math.PI/180; 
    } 

    function annularSector(centerX, centerY, startAngle, endAngle, innerRadius, outerRadius) { 
     startAngle = deg2rad(startAngle + 180); 
     endAngle = deg2rad(endAngle + 180); 

     var p = [ 
       [centerX + innerRadius * Math.cos(startAngle), centerY + innerRadius * Math.sin(startAngle)] 
      , [centerX + outerRadius * Math.cos(startAngle), centerY + outerRadius * Math.sin(startAngle)] 
      , [centerX + outerRadius * Math.cos(endAngle),  centerY + outerRadius * Math.sin(endAngle)] 
      , [centerX + innerRadius * Math.cos(endAngle),  centerY + innerRadius * Math.sin(endAngle)] 
      ]; 

     var angleDiff = endAngle - startAngle 
      , largeArc = (angleDiff % (Math.PI * 2)) > Math.PI ? 1 : 0; 

     var commands = []; 

     commands.push("M" + p[0].join()); 
     commands.push("L" + p[1].join()); 
     commands.push("A" + [outerRadius, outerRadius].join() + " 0 " + largeArc + " 1 " + p[2].join()); 
     commands.push("L" + p[3].join()); 
     commands.push("A" + [innerRadius, innerRadius].join() + " 0 " + largeArc + " 0 " + p[0].join()); 
     commands.push("z"); 

     return commands.join(" "); 
    } 

    function create(type, attr, parent) { 
     var element = document.createElementNS("http://www.w3.org/2000/svg", type); 
     if (attr) for (var name in attr) element.setAttribute(name, attr[name]); 
     if (parent) parent.appendChild(element); 
     return element; 
    } 
    var svg = document.querySelector("svg#generate g#chart"); 
    create("path", { 
     fill: "#FF0000", 
     d: annularSector(80, 80, 0, 180, 0, 80) 
    }, svg); 


    create("path", { 
     fill: "#00FF00", 
     d: annularSector(80, 80, 0, 65, 0, 80) 
    }, svg);

調整縮放視框。

來源

2013-12-23 10:59:17

Android真的，真的不喜歡transform: translateZ(0);。完全一樣。無處不在。如果此屬性位於該樹中的任何元素上，則整個事件都會失敗。

更新小提琴的作品： http://jsfiddle.net/FB6rf/15/

如果任何人有一個解釋這種行爲，我所有的耳朵。因爲否則* poof *，我出局100賞金。也許如果有些用戶告訴我一些愛，它不會是如此大的損失。

來源

2013-12-20 19:49:04

格旋轉，但div的裁剪框不

回答

相關問題