Question

我创造了一个简单的圆环图的小提琴：http://jsfiddle.net/4azpfk3r/217/

如何让甜甜圈图表显示红色轮廓并且分数/百分比填充为纯红色，留下透明/红色轮廓部分的百分比未评分？

CSS：

.background {
    background: grey;
}

.item {
    position: relative;
    float: left;
}


.item h2 {
    text-align:center;
    position: absolute;
    line-height: 125px;
    width: 100%;
}


svg {
    transform: rotate(-90deg);
}


.circle_animation {
    stroke-dasharray: 440;
    stroke-dashoffset: 440;
}


.html .circle_animation {
    -webkit-animation: html 1s ease-out forwards;
    animation: html 1s ease-out forwards;
}


.css .circle_animation {
    -webkit-animation: css 1s ease-out forwards;
    animation: css 1s ease-out forwards;
}


@-webkit-keyframes html {
    to {
        stroke-dashoffset: 80;
    }
}


@keyframes html {
    to {
        stroke-dashoffset: 80;
    }
}

Answer 1

如果我正确理解您的问题，请尝试添加以下css行：

#circle{fill:none;stroke:red;color:red}

如果分数类型也是红色，请将颜色属性添加到h2：

.item h2 {
   text-align:center;
   position: absolute;
   line-height: 125px;
   width: 100%;
   color:red; /*ADD RED COLOR TO SCORE*/
}

要设置分数标题的样式，请先给它一个类： <p class="scoreHeader">Score: 76/100</p>

按照您的意愿设计风格：

.scoreHeader{
    padding:10px;
    background:red;
    color:white;
    font-weight:bold;
}

Answer 2

在此处查看我的示例https://codepen.io/350d/pen/gxXyGB 我们的想法是只使用border-color和rotation。这里没有使用渐变和动画。

CSS3甜甜圈图表

2 个答案: