创建一个严重分段的环/圆

Question

我需要使用HTML，CSS，SVG或其他类似方法重新创建上面的图像。它仅用于视觉目的，不需要任何类型的实际功能。优选地，非白色部分是透明的，以便我可以容易地改变背景颜色并且在中心内具有其他元素

我无法使用透明图像的原因是因为我需要能够轻松地对其进行缩放，并且可能很容易改变条形图的颜色

我知道如何使用this CSS approach执行大致相同的操作，但这需要为每个我不想要的段提供单独的元素。

我想到的另一个选择是在Raphael.js中创建一个包含大量碎片的圆环图，但对于我想要的简单结果来说，这看起来似乎很多

所以在我使用我提到的方法之一开始一个漫长而复杂的过程之前，是否有一种更简单，更优化的方法来创建我想要的效果？我不是要求完成输出，只是要了解哪种方法最适合创建这种类型的效果

修改

最佳解决方案是纯CSS方法，不需要为每个段提供单独的元素。否则提供的答案是很好的解决方案！

Answer 1

您可以使用stroke-dasharray执行此操作：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
    <circle cx="50" cy="50" r="30" stroke-dasharray="0.628" stroke-width="2" 
            fill="none" stroke="black"/>
</svg>

示例：http://jsfiddle.net/75WsM/

Answer 2

简易循环就足够了。

<div id="R">
</div>

<script>
var createCircle = function(step,posX,posY,radius){
    var paper = Raphael("R",500,500);
    for(var i = 0; i < 360; i=i+step){        
        var currentRect = paper.rect(posX+radius,posY, 2,20);
        currentRect.attr({'fill':'#ffffff',stroke:0});
        currentRect.rotate(i,posX+radius,posY + radius);
    }
}
createCircle(3,50,50,94);
</script>

http://jsfiddle.net/mBKP4/2/