在尝试制作圆形仪表时，我认为某些代码中的故障使我感到困惑

Question

我正在使用以下代码构建圆形量规：https://codepen.io/Hiswe/pen/evCxr但当我更改标记代码中的值时，度量不会在50%到60%之间发生变化。也就是说，如果html图形在标记示例中从66变为59，并且css也发生了类似的变化，那么无论设置什么角度，标尺都会保持在50/180度。

它对50到59之间的所有值都执行此操作。有什么想法吗？

/*h2:nth-of-type(1), section:nth-of-type(1), h2:nth-of-type(2), section:nth-of-type(2) {
display: none;
}*/
.gauge-markup {
width: 5em;
height: 5em;
display: inline-block;
background: rgba(0, 0, 0, 0.05);
position: relative;
border: 1px solid #335;
text-indent: -999em;
margin: .5em;
}
.gauge-markup::before {
content: attr(data-fill);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-indent: 0;
}
.gauge-markup,
.gauge-markup span,
.gauge-markup span::before,
.gauge-markup span::after {
border-radius: 10em;
}
.gauge-markup span,
.gauge-markup span::before,
.gauge-markup span::after {
box-sizing: border-box;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

/* Container clipping handling */
.gauge-markup[data-fill^="6"] span,
.gauge-markup[data-fill^="7"] span,
.gauge-markup[data-fill^="8"] span,
.gauge-markup[data-fill^="9"] span,
.gauge-markup[data-fill^="10"] span {
clip: rect(auto, auto, auto, auto)
}
.gauge-markup span,
.gauge-markup[data-fill="6"] span,
.gauge-markup[data-fill="7"] span,
.gauge-markup[data-fill="8"] span,
.gauge-markup[data-fill="9"] span,
.gauge-markup[data-fill="10"] span {
clip: rect(0, 5em, 5em, 2.5em);
}
.gauge-markup span::before,
.gauge-markup span::after {
border: 1em solid #335;
content: '';
clip: rect(0, 2.5em, 5em, 0);
}
.gauge-markup span::before {
transform: rotate(180deg);
}

/* All the values can be computed by a css pre processor loop */
.gauge-markup[data-fill="0"] span::before {
transform: rotate(0deg)
}
.gauge-markup[data-fill="6"] span::before {
transform: rotate(10.8deg)
}
.gauge-markup[data-fill="25"] span::before {
transform: rotate(90deg)
}
.gauge-markup[data-fill="33"] span::before {
transform: rotate(151.2deg)
}
.gauge-markup[data-fill="50"] span::before {
transform: rotate(180deg)
}
.gauge-markup[data-fill="59"] span::after {
transform: rotate(-144.8deg)
}
.gauge-markup[data-fill="75"] span::after {
transform: rotate(-90deg)
}

<h2>Any size, transparent background but additional markup</h2>
<section>
<div class="gauge-markup" data-fill="0">0 <span /></div>
<div class="gauge-markup" data-fill="6">6 <span /></div>
<div class="gauge-markup" data-fill="25">25<span /></div>
<div class="gauge-markup" data-fill="33">33<span /></div>
<div class="gauge-markup" data-fill="50"> 50 <span /></div>
<div class="gauge-markup" data-fill="59">59<span /></div>
<div class="gauge-markup" data-fill="75">75<span /></div>
<div class="gauge-markup" data-fill="100">100<span /></div>
</section>

Answer 1

我一开始确实试图理解给定的代码，因此按照设置回答问题。

然而，我发现它与它试图实现的目标相比非常复杂，尤其是因为它需要对各种值进行一些预处理，而且它在HTML中有一个额外的span元素，否则是多余的。它还使用伪元素中的内容将数字放在量表中，以使其居中，这在当今是聪明但不必要的。

因此，这里有一个更简单的方法建议。每个量表都有自己的值集，但它是一个CSS变量(--pc-percentage(，而不是一个数据属性。然后CSS使用它来计算所需的学位数量，这样我们就不需要任何预处理了。

圆弧和半透明背景是由每个仪表上的圆锥和径向梯度组合绘制的。

理论上，两次使用百分比是多余的，因为我们可以再次考虑使用伪元素将值放入度量中的想法，但这可能会损害可访问性，因此两者都保留在中

.gauge-markup {
--bg: rgba(0, 0, 0, 0.05);
--border: #335;
--deg: calc((var(--pc) * 360deg) / 100);
width: 5em;
height: 5em;
position: relative;
border: 1px solid var(--border);
margin: .5em;
border-radius: 50%;
justify-content: center;
align-items: center;
display: inline-flex;
background-image: radial-gradient(var(--bg) 0, var(--bg) 50%, transparent 50%, transparent 100%), radial-gradient(white 0, white 50%, transparent 50%, transparent 100%), conic-gradient(var(--border) 0, var(--border) var(--deg), var(--bg) var(--deg), var(--bg) 360deg);
}

<section>
<div class="gauge-markup" style="--pc: 0">0</div>
<div class="gauge-markup" style="--pc: 6">6</div>
<div class="gauge-markup" style="--pc: 25">25</div> 
<div class="gauge-markup" style="--pc: 33">33</div> 
<div class="gauge-markup" style="--pc: 50">50</div> 
<div class="gauge-markup" style="--pc: 59">59</div> 
<div class="gauge-markup" style="--pc: 75">75</div>
<div class="gauge-markup" style="--pc: 100">100</div>
</section>