如何用SVG和CSS将环形图（Donut Chart）改造为半环形图？

要实现半环形图，核心是把原代码里的<circle>标签替换成<path>来绘制半圆，这样能精准控制只显示半个环形的范围，同时保留原有的动画效果。以下是修改后的完整代码：

修改后的CSS #

.donut-ring {
    stroke: #EBEBEB;
}

.donut-segment-2 {
    stroke: green;
    animation: donut 1s forwards;
}

@keyframes donut {
    0% {
        stroke-dasharray: 0, 50;
    }
    100% {
        stroke-dasharray: 25, 25;
    }
}

修改后的HTML #

<svg width="100%" height="100%" viewBox="0 0 40 40" class="donut">
    <!-- 背景半环形路径 -->
    <path class="donut-ring" d="M20,4.0845 A15.9155,15.9155 0 0 1 20,35.9155" fill="transparent" stroke-width="3.5" />
    <!-- 数据分段半环形路径，示例为50%占比 -->
    <path class="donut-segment donut-segment-2" d="M20,4.0845 A15.9155,15.9155 0 0 1 20,35.9155" fill="transparent" stroke-width="3.5" stroke-dasharray="25 25" stroke-dashoffset="0" />
</svg>

关键修改说明： #

• 替换为<path>：用d属性定义半圆路径，M20,4.0845是起始点（环形顶部），A15.9155,15.9155 0 0 1 20,35.9155表示绘制上半圆弧，参数控制路径方向与弧度范围。
• 调整stroke-dasharray：半环形总长度是整圆的一半，因此把原比例从100/75改为50/25的基准，示例中25,25对应50%的占比。
• 动画适配：动画的起始、结束值同步改为半圆长度比例，保证动画过渡自然。
• 移除中心圆：半环形无需遮挡下半区域，因此删除原donut-hole元素。

如果需要调整占比，只需修改stroke-dasharray的第一个数值（例如30%占比改为15, 35），同时对应更新动画内的数值即可。

内容的提问来源于stack exchange，提问作者Kvasimodo