我正处于思考我想要创建的番茄钟背后逻辑的阶段。
我想使用 SVG，这样我就可以学习和练习此练习。
我想要的是一个 SVG 圆 转换为路径。随着时间的推移，行程每一秒都在减少。
<path d="m3.9 134c0-71.9 58.2-130.1 130.1-130.1 71.9 0 130.1 58.2 130.1 130.1 0 71.9-58.2 130.1-130.1 130.1 -71.9 0-130.1-58.2-130.1-120.1" style="fill:#F00;stroke-width:5;stroke:#000"/>
https://jsfiddle.net/crggL2h9/
我一直盯着 SVG 代码(从 circle 转换为 path)，但是，我不知道如何减少它。希望有想法和建议。
最佳答案
这是一个使用 Robert Longson 的 dasharray 建议和圆弧的示例。
<!DOCTYPE HTML>
<html>
<head>
<title>Tick Path</title>
</head>
<body onload=initArc()>
<center>
<svg width=400 height=400>
<circle cx=200 cy=200 r=180 fill=red stroke="none" />
<path id=clock fill="none" stroke="black" stroke-width=5 />
</svg>
<br>
<button onClick=tick()>tick</button> : <input type="text" style='width:30px;' id=tickValue value=60 />
</center>
<script>
//---onload---
function initArc()
{
var r=180
var cx=200
var cy=200
var d=
[
"M",cx,cy,
"m",-r,0,
"a",r,r,
0,1,0,2*r, 0,
"a",r,r,
0,1,0,-2*r, 0
]
clock.setAttribute("d",d.join(" "))
}
var tickCnt=59
function tick()
{
tickValue.value=tickCnt--
var length=clock.getTotalLength()
var strokeDash=(length/60)*tickCnt
clock.setAttribute("stroke-dasharray",strokeDash+" "+length)
}
</script>
</body>
</html>关于javascript - 减少 SVG 中的路径，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38803671/