div 旋转，但 div 的剪切框不旋转答案

【问题标题】：div rotates but div's clipping box does notdiv 旋转，但 div 的剪切框不旋转
【发布时间】：2013-12-18 17:50:48
【问题描述】：

试图在没有 JS 库（如 Raphael）的情况下构建这个简洁的小仪表，我想出了一个问题，你可以找到 here。在经历了很多挫折之后，我想到了另一种布局来使这个仪表工作（也可以解决一个单独的已知 Chrome 错误），这可以在上面的小提琴中看到。

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

但是，这造成了一个全新的 Android（至少 4.0.4）浏览器缺陷。剪切框div 元素按预期旋转。但是，实际计算的剪切框具有水平和垂直边界，包括可见形状。本质上，这意味着子元素总是被裁剪成正方形，而不是沿着元素的旋转边缘。

仪表本身有一些不寻常的要求，否则这会更容易做到：它不是一个完整的半圆，而是一个弧顶的切片。它还必须围绕该切片的底部中心点旋转，而不是圆的中心。

【问题讨论】：

标签： android css rotation overflow hidden

【解决方案1】：

尝试使用 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);

调整 viewBox 以进行缩放。

【讨论】：

【解决方案2】：

Android 真的，真的不喜欢transform: translateZ(0);。完全没有。任何地方。如果此属性位于该树中的任何元素上，则整个事情都会失败。

更新的小提琴有效： http://jsfiddle.net/FB6rf/15/

如果有人对此行为有解释，我会全力以赴。因为否则 *poof*，我将获得 100 赏金。或许如果有些用户给我一些爱，也不会是那么大的损失。

【讨论】：