Question

我正处于一个阶段，我正在考虑我想要创建的番茄钟的基础逻辑。

我想使用SVG，所以我可以学习＆amp;练习练习。

我想到的是转换为路径的SVG circle。随着时间的推移，中风每秒都会减少。

<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），但是，我不知道如何减少它。会欣赏的想法和建议。

Answer 1

这是一个使用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>

减少SVG中的路径

1 个答案: