-5
A
回答
1
我觉得that's不是一个好的解决方案加载一个27K的CSS文件。圆形帽是纯CSS的问题(你可以在开始和结束位置插入圆圈)
创建svg的时间更短。
一个小样本
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>svgPercent</title>
</head>
<body>
<svg width="200" height="200" viewBox="0 0 200 200">
<path id="arc1" fill="none" stroke="yellow" stroke-width="20" stroke-linecap="round"/>
<path id="arc2" fill="none" stroke="grey" stroke-width="20" stroke-linecap="round"/>
<text x="50%" y="40%"
font-family="Arial"
font-weight="bold"
font-size="50"
alignment-baseline="middle" text-anchor="middle">%25</text>
</svg>
<script>
function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
var angleInRadians = (angleInDegrees-90) * Math.PI/180.0;
return {
x: centerX + (radius * Math.cos(angleInRadians)),
y: centerY + (radius * Math.sin(angleInRadians))
};
}
function describeArc(x, y, radius, startAngle, endAngle){
var start = polarToCartesian(x, y, radius, endAngle);
var end = polarToCartesian(x, y, radius, startAngle);
var largeArcFlag = endAngle - startAngle <= 180 ? "0" : "1";
var d = [
"M", start.x, start.y,
"A", radius, radius, 0, largeArcFlag, 0, end.x, end.y
].join(" ");
return d;
}
document.getElementById("arc1").setAttribute("d", describeArc(100, 100, 90, 1, 360));
document.getElementById("arc2").setAttribute("d", describeArc(100, 100, 90, 360, 90));
</script>
</body>
</html>
+0
我不想使用svg。我想编辑这段代码:cssscript.com/demo/pure-css-circular-percentage-bar。因为您可以轻松编辑后端。 –
+0
我认为问题是在行结束时......我检查了代码,在这里看不到方法。 –
相关问题
- 1. 圆形进度条css
- 2. 圆形进度条
- 3. CSS或jQuery/JavaScript椭圆形/圆形方形进度条
- 4. 圆形UILabel圆形进度条
- 5. 圆形边框进度条
- 6. WPF:圆形进度条
- 7. 弯曲圆形进度条
- 8. 圆形进度条Android
- 9. Android - 圆角方形线条进度条
- 10. c#xamarin圆形进度条 - Android
- 11. 圆形进度条大小对齐
- 12. Android圆形进度条大小
- 13. jQuery动画圆形进度条
- 14. 角2中的圆形进度条
- 15. 视觉基本圆形进度条
- 16. Xamarin.UWP:如何制作圆形进度条
- 17. 使用Tkinter的圆形进度条?
- 18. 使用壁画的圆形进度条
- 19. GWT中的圆形进度条
- 20. 带指示器的圆形进度条
- 21. Java中的圆形进度条显示
- 22. 在圆形进度条中清除progressDrawable
- 23. 使用JavaScript的圆形进度条
- 24. 圆形进度条中的渐变
- 25. Windows窗体中的圆形进度条
- 26. 旋转圆形进度条对面
- 27. 用html5制作圆形进度条sgg
- 28. Unity 3D中的圆形进度条 - UnityScript
- 29. 圆形进度条中的圆形边Android
- 30. 半圆形进度条Android - 绘制半圆
哪里是你的CSS和HTML? – zgood
尽管能够将东西篡改成某些形状,但CSS不是图像格式。改用SVG。 – Quentin
你读过他们的[说明](http://www.cssscript.com/pure-css-circular-percentage-bar/)吗? – Darren