如何为 SVG 笔画设置动画以充当仪表？
Posted
技术标签:
【中文标题】如何为 SVG 笔画设置动画以充当仪表？【英文标题】：How do I animate SVG stroke to act as a gauge? 【发布时间】：2022-01-22 03:59:22 【问题描述】：我已经设置了这个代码：
.gauge
stroke-dasharray: 1000;
stroke-dashoffset: 500;
animation: dash 5s linear alternate;
@keyframes dash
from
stroke-dashoffset: 0;
to
stroke-dashoffset: 1000;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="dist/style.css">
<title>Gauge</title>
</head>
<body>
<div class="gauge">
<svg fill="white" stroke="red" stroke- stroke-linecap="round">
<circle cx="200" cy="200" r="100"/>
</svg>
</div>
</body>
</html>我想做的就是把它变成这样的仪表（忘记颜色和全部）：
我很难理解 dasharray 和 dashoffset 命令以便将其转换为我需要的...有人可以帮忙吗？
【问题讨论】：
路径（圆）的长度为 623.32。将此值用于 stroke-dasharray 和 stroke-dashoffset。此外，如果您的仪表有 100 个单位，为了知道 1 个单位的长度，您需要将 623.32 除以 100，即 2*Math.PI。另请阅读这篇文章：css-tricks.com/svg-line-animation-works 更简单，将pathLength 设置为100，无需计算。
***.com/questions/47910146/…
codepen.io/Paulie-D/pen/yLgzpXm
【参考方案1】：
动画stroke-dashoffset 或stroke-dasharray 部分取决于用例。在这里，我发现 1) 使用 transform/rotate 旋转圆圈和 2) 为 stroke-dasharray 设置动画更容易。
先决条件是设置 pathLength 属性。将其设置为<circle> 将控制一个完整圆圈的长度。在这种情况下，它看起来或多或少像仪表是一个圆的 2/3。因此，整圈为 150 且 2/3 为 100 是有意义的。
现在可以通过stroke-dasharray 中的第一个值来控制仪表的长度。第二个值应该大于 100 -- 它是数组中行之间的空间长度。
.gauge
stroke-dasharray: 100 150;
animation: dash 5s linear alternate;
@keyframes dash
from
stroke-dasharray: 100 150;
to
stroke-dasharray: 0 150;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="dist/style.css">
<title>Gauge</title>
</head>
<body>
<div class="gauge">
<svg fill="white" stroke="red" stroke- stroke-linecap="round">
<circle transform="rotate(150 200 200)" cx="200" cy="200" r="100" pathLength="150"/>
</svg>
</div>
</body>
</html>【讨论】：
以上是关于如何为 SVG 笔画设置动画以充当仪表？的主要内容，如果未能解决你的问题，请参考以下文章