javascript - 如何使用SVG制作半圆装载机？

Question

我想要达到的结果是这样的:

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

我不明白的是:

1. 如何将半圆内的线条转 Angular 为圆 Angular
2. 如何在实心半圆的末端添加垂直线

有人可以帮忙吗？

完整代码在这里:

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>

Answer 1

线帽由 stroke-linecap attribute 控制。这个特定示例的特点是，它的一端是圆形的，另一端是方形的。因此我使用 mask 来创建“米”的形状。 “值”由蒙版中的黑色圆圈笔划控制。

“米”后面的线放置在中间，然后旋转。

document.forms.f1.range.addEventListener('change', e => {
  let angle = 180 / 100 * e.target.value;
  document.getElementById('c1').setAttribute('stroke-dasharray', `180 ${angle}`);
  document.getElementById('l1').setAttribute('transform', `translate(50 50) rotate(${angle})`);
  document.getElementById('t1').textContent = e.target.value;
});

body {
  background: #292929;
}

<form name="f1">
  <input type="range" name="range" min="0"
    max="100" value="90" />
</form>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 60"
  width="400">
  <defs>
    <linearGradient id="gradient">
      <stop offset="0%" stop-color="#B8F1C6" />
      <stop offset="100%" stop-color="#EBF8A1" />
    </linearGradient>
    <mask id="m1">
      <circle cx="50" cy="50" r="43" fill="none"
        stroke="white" stroke-width="6" stroke-dasharray="180"
        pathLength="360" stroke-linecap="round"
        transform="rotate(184 50 50)"/>
      <circle id="c1" cx="50" cy="50" r="43" fill="none"
        stroke="black" stroke-width="8"
        stroke-dasharray="180 162" pathLength="360" />
    </mask>
  </defs>
  <circle cx="50" cy="50" r="43" fill="none"
    stroke="gray" stroke-width="2" stroke-dasharray="175 360"
    pathLength="360" stroke-linecap="round" transform="rotate(184 50 50)"/>
  <rect width="100" height="60" fill="url(#gradient)" mask="url(#m1)"/>
  <line id="l1" x1="-36" y1="0" x2="-50" y2="0" stroke="white"
    stroke-width=".3" transform="translate(50 50) rotate(162)" />
  <text id="t1" x="50" y="40" text-anchor="middle" fill="#EBF8A1"
    font-family="sans-serif">90</text>
  <text x="7" y="57" text-anchor="middle" fill="gray"
    font-family="sans-serif" font-size="5">0</text>
  <text x="93" y="57" text-anchor="middle" fill="gray"
    font-family="sans-serif" font-size="5">100</text>
</svg>