Javascript 如何使用 SVG 制作半圆形装载机

发布于01月06日

我想要达到的结果是:

到目前为止，我所取得的成就是:

我搞不懂的是:

如何使半圆中的线条的拐角变圆
如何在填充的半圆的末端添加垂直线

有人能帮帮忙吗？

完整的代码如下:

function App() {
  return <SemiCircleProgress percentage={70} />;
}

function SemiCircleProgress({ percentage }) {
    const strokeWidth = 25;
    const background = "#D9D9D9";
    const diameter = 400;

    const coordinateForCircle = diameter / 2;
    const radius = (diameter - 2 * strokeWidth) / 2;
    const circumference = Math.PI * radius;
    const semiCirclePercentage = percentage * (circumference / 100);

    return (
        <div className="semicircle-container">
            <svg
                width={diameter}
                height={diameter / 2}
                style={{ transform: "rotateY(180deg)", overflow: "hidden" }}
            >
                <linearGradient id="gradient">
                    <stop offset="0%" stopColor="#B8F1C6" />
                    <stop offset="100%" stopColor="#EBF8A1" />
                </linearGradient>

                <circle
                    cx={coordinateForCircle}
                    cy={coordinateForCircle}
                    r={radius}
                    fill="none"
                    stroke={background}
                    strokeWidth={8}
                    strokeDasharray={circumference}
                    style={{
                        strokeDashoffset: circumference
                    }}
                />
                <circle
                    cx={coordinateForCircle}
                    cy={coordinateForCircle}
                    r={radius}
                    fill="none"
                    stroke="url(#gradient)"
                    strokeWidth={strokeWidth}
                    strokeDasharray={circumference}
                    style={{
                        strokeDashoffset: semiCirclePercentage,
                        transition:
                            "stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s"
                    }}
                />
            </svg>
        </div>
    );
}


ReactDOM.render( < App / > , document.getElementById("root"));

body {
  background: #292929;
}

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root"></div>

Javascript 如何使用 SVG 制作半圆形装载机

推荐答案

Javascript相关问答推荐

使用print This时， map 容器已在LeafletJS中初始化

是什么原因导致此Angular 16应用程序中类型错误时属性结果不存在？

使用useup时，React-Redux无法找到Redux上下文值

单击子元素时关闭父元素(JS)

Chrome是否忽略WebAuthentication userVerification设置？""

查找最长的子序列-无法重置数组

JS，当你点击卡片下方的绿色空间，而它是在它的背后转动时，

Angular 订阅部分相互依赖并返回数组多个异步Http调用

如何将zoom 变换应用到我的d3力有向图？

一个实体一刀VS每个实体多刀S

按下单键和多值

如何使用基于promise (非事件emits 器)的方法来传输数据？

不协调嵌入图片

如何使用Reaction路由导航测试挂钩？

Promise.race()返回已解析的promise ，而不是第一个被拒绝的promise

当达到高度限制时，如何裁剪图像？使用html和css

如何使用useparams从react路由中提取id

如何格式化API的响应

：host：：ng-Deep不将样式应用于material 复选框

调试jQuery代码以获取所有行的总和(票证类型)