css 如何用SVG制作半圆形装载机？

bnl4lu3b 于 2023-01-06 发布在其他

关注(0)|答案(2)|浏览(186)

我想达到的结果是这样的：

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

我不明白的是：
1.如何圆化半圆中直线的角
1.如何在实心半圆的端点添加垂直线

有人能帮忙吗？
完整代码如下所示：

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>

css

来源：https://stackoverflow.com/questions/75009617/how-to-make-a-semicircle-loader-using-svg

2条答案

按热度按时间

pkmbmrz71#

您可以查看线条的端点属性以获得圆形端点;通常可以同时使用多个和元素。但是对于一个复杂的元素，如果你想对形状进行具体的控制，通常使用一个元素效果更好。它有一个属性“d”，它只是一个路径段列表：直线、圆弧、二次曲线或贝塞尔曲线。你将能够从一系列圆弧和直线中构造出你想要的形状。
我不认为你能避免计算结束记号的坐标，但是你会发现把东西放在带有“transform”属性的元素中会有帮助。这是一个非常有用的动画技巧。例如，你可以把垂直线放在一个原点位于大半圆中心的中，然后旋转来绕着弧移动线。那么至少SVG正在为您执行trig。
mozdev是一个非常好的资源，这个教程中关于路径的内容非常清楚：https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths
你正在制作动画，我应该指出D3（https://d3js.org）是一个广泛使用的工具，用于生成和动画复杂的SVG，我强烈建议你去看看它。有时你会发现D3的一个组件可以配置成你想要的东西，或者足够接近;如果不是，至少它会帮助你的动画和过渡。
最后，如果你只是盯着文本编辑器不确定如何完成你的目标，你可以打开一个像InkScape这样的工具，试着画出你想要的东西。视觉反馈是非常有帮助的。然后，你可以看看这个工具生成的SVG代码，即使你不能直接使用它，你也可以看到它是如何结构化的--它会有点混乱。但是仅仅理解所使用的元素和属性的选择就可以帮助您更好地理解SVG。

赞(0）回复(0）举报 2023-01-06

7lrncoxx2#

线帽是由stroke-linecap attribute控制的。这个例子的特点是它的一端是圆形的，另一端是方形的。因此我使用了一个蒙版来创建"米"的形状。"值"是由蒙版中的黑色圆圈控制的。
"米"后面的线放置在中间，然后旋转。

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>

赞(0）回复(0）举报 2023-01-06

我来回答

css 如何用SVG制作半圆形装载机？

2条答案

相关问题

热门标签

最新问答