创建一个高度分割的环/圆答案

【问题标题】：Creating a heavily segmented ring/circle创建一个高度分割的环/圆
【发布时间】：2013-10-14 06:29:45
【问题描述】：

我需要使用 HTML、CSS、SVG 或其他类似方式重新创建上面的图像。它仅用于视觉目的，不需要任何类型的实际功能。最好是非白色部分是透明的，这样我就可以轻松更改背景颜色并在中心内放置其他元素

我不能使用透明图像的原因是因为我需要能够轻松地对其进行缩放，并可能毫不费力地改变条形的颜色

我知道如何使用this CSS approach 做大致相同的事情，但这需要为我不想要的每个单独的段添加一个单独的元素。

我想到的另一个选择是在 Raphael.js 中创建一个包含很多片段的甜甜圈图，但对于我想要的简单结果来说，这似乎也需要做很多工作

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

编辑

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

【问题讨论】：

如果它应该在页面上很大，我认为 Raphael 中的简单循环将是最简单有效的解决方案。我会在那里使用普通的 Raphael，没有任何会增加不必要开销的图表库。另一方面，如果这将是一个相当小的图像，也许画布会是一个更好的方法。当然，这是假设您由于性能原因不想要单独的节点。从编码的角度来看，创建这些切片所需的循环非常简单。
@HubertOG 我想我应该在问题中包含这个，但我的最终目标是重新创建this gif（最好使用纯 CSS）。到目前为止，this is what I have。我想我会尝试使用画布并使用透明图像将自己限制在当前大小。感谢您的意见！

标签： css svg raphael visualization graphael

【解决方案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/

【讨论】：

有什么方法可以通过 CSS 加载 SVG 而无需放置 SVG 元素或使用 javascript？换句话说，我可以通过:after 伪元素加载它吗？我不相信有，但我也不知道stroke-dasharray
您可以将其用作背景图像
给以后看到这个的人的一个注意事项：我必须在我的 svg 标签中包含 xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink" 并使用 base64 编码使其正常工作

【解决方案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/

【讨论】：