HTML百分比饼图加弯曲文字效果 | SVG简易应用

使用animation绘制圆形饼图，SVG绘制曲线形文字

demo:http://jsbin.com/kiguxan

HTML：

<div class="container-pie">
    <div class="container">
        <div class="outbox outbox1">
            <!--–饼图–-->
            <div class="pie">
                53.8%
            </div>
            <!--–饼图内文字，tspan内的百分比根据实际百分比手动修改–-->
            <div>
                <svg xmlns="http://www.w3.org/2000/svg">
                    <defs>
                        <path d="M-4,101 a1,1 0 0,1 166,0" id="myTextPath">
                        </path>
                    </defs>
                    <defs>
                        <path d="M-3,40 a1,1 0 0,0 160,0" id="myTextPath2">
                        </path>
                    </defs>
                    <text style="text-anchor:start;font-size: 12px; fill:white;word-spacing: 0.5px;" y="100">
                        <textpath xlink:href="#myTextPath">
                            <tspan x="100">
                                城镇人口
                            </tspan>
                            <tspan dy="15" x="110">
                                53.8%
                            </tspan>
                        </textpath>
                        <textpath xlink:href="#myTextPath2">
                            <tspan x="100">
                                乡村人口
                            </tspan>
                            <tspan dy="15" x="110">
                                46.2%
                            </tspan>
                        </textpath>
                    </text>
                </svg>
            </div>
            <div class="center-txt">
                <div>
                    <span class="orangefont">
                        A城总人口
                    </span>
                </div>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="outbox outbox2">
            <!--–饼图–-->
            <div class="pie">
                34.56%
            </div>
            <!--–饼图内文字，tspan内的百分比根据实际百分比手动修改–-->
            <div>
                <svg xmlns="http://www.w3.org/2000/svg">
                    <defs>
                        <path d="M-4,101 a1,1 0 0,1 166,0" id="myTextPath">
                        </path>
                    </defs>
                    <text style="text-anchor:start;font-size: 12px; fill:white;letter-spacing: 0.5px;" y="100">
                        <textpath xlink:href="#myTextPath">
                            <tspan x="100">
                                鲜果类占比
                            </tspan>
                            <tspan dy="15" x="110">
                                34.56%
                            </tspan>
                        </textpath>
                    </text>
                </svg>
            </div>
            <div class="center-txt">
                <div>
                    <span>
                        市场农副产品消费总额
                    </span>
                </div>
            </div>
        </div>
    </div>
</div>

CSS：

.orangefont{color:#F96E3E;}
        .pie{

            border-radius:50%;



        }
        .outbox1 .pie{background: #FFBD5C;background-image:linear-gradient(to right,transparent 50%,#F96E3E 0);}
        .outbox2 .pie{background: #31BD48;background-image:linear-gradient(to right,transparent 50%,#FFBD5C 0);}

        .pie::before{
                content:";
                display: block;
                margin-left: 50%;
                height:100%;
                border-radius:0 100% 100% 0 / 50%;
                background-color:inherit;
                transform-origin:left;
                animation:spin 50s linear infinite,
                          bg 100s step-end infinite;
                animation-play-state: paused;
                animation-delay:inherit;
          }
            .outbox1 .pie::before{animation:spin 50s linear infinite,
                          bg1 100s step-end infinite;
                          animation-play-state: paused;
                          animation-delay:inherit;}
          @keyframes spin{
               to{transform: rotate(.5turn);}
          }
          @keyframes bg{
              50%{background: #FFBD5C;}
           }
          @keyframes bg1{
              50%{background: #F96E3E;}
           }

           .outbox{position: relative;}
           .outbox>div{position: absolute;left:0;right:0;}
           .outbox>div,svg{width:160px;height:160px;}

           .center-txt{
           display: -webkit-box;
           display: -moz-box;
           display: -ms-flexbox;
           display: -webkit-flex;
           display: flex;
           justify-content:center;
                align-items:center;
            }
           .center-txt>div{
            width:80px;
            height:80px;
            background:#fff;
            border-radius:50%;
            color:#31BD48;

           display: -webkit-box;
           display: -moz-box;
           display: -ms-flexbox;
           display: -webkit-flex;
           display: flex;
           justify-content:center;
           align-items:center;
           text-align: center;

        }

        .container-pie{overflow: hidden;display: -webkit-box;
           display: -moz-box;
           display: -ms-flexbox;
           display: -webkit-flex;
           display: flex;
           justify-content:space-around;
           align-content:space-around;
           }
        .container{width:160px;height:160px;float:left;margin:0 0%;}

JS :

function $$(selector, context) {
context = context || document;
var elements = context.querySelectorAll(selector);
return Array.prototype.slice.call(elements);
}

$$('.pie').forEach(function(pie) {
var p = pie.textContent;
var pf = parseFloat(p) / 100;
var pr = pf * 360 / 2;
console.log(pr);
pie.style.transform = "rotateZ(-" + pr +"deg)";
pie.style.animationDelay = '-' + parseFloat(p) + 's';

pie.textContent = "";

});