我有一个用以下样式创建的圆圈：
.circle {
width: 150px;
height: 150px;
border-radius: 100%;
-webkit-border-radius: 100%;
}
我想在这个圆圈周围有一个轮廓,但是,我希望它只是围绕圆圈的一部分来产生一个百分比.
例如：
> 50％将创建从12点到6点的轮廓
> 25％将创建从12点到3点的轮廓
> 66％将创建从12点到8点的轮廓
作为宽度和高度并定义,我可以通过在相同的位置创建一个圆来创建一个轮廓,虽然我不知道如何创建“饼”形状.
我还希望能够支持尽可能多的浏览器.
提前致谢.
解决方法
基本上,你使用任何能够生成饼图的库,然后在饼图中放置一个圆圈,与你的页面(或元素)背景颜色相匹配,这样它看起来就像一个甜甜圈(实际上圆环图是你正在寻找的对于).当然,您只为您的应用程序使用两个片段.
https://github.com/azagniotov/pielicious
Addon到http://raphaeljs.com/
即使在IE8上也能完美运行.
我在当前项目中将其改编为自定义knockout.js绑定.这就是结果：
