1

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

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

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

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

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

编辑

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

4

2 回答 2

4

你可以这样做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/

于 2013-10-08T10:46:23.030 回答
1

简单的循环应该足够了。

<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/

于 2013-10-08T08:07:34.633 回答