私は作成したいpomodoroクロックの根底にある論理を考えている段階です。SVGのパスを減らす
私はこの練習のために&練習を学ぶことができるのでSVGを使いたいと思います。
私は何を考えていると、パスに変換SVG circleです。時間が経過すると、1秒ごとにストロークが減少します。
<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"/>
アイブ氏は、しかし、私はそれを減らすことについて移動する方法が分からない、（pathにcircleから変換された）SVGコードを凝視されて。考えていただければ幸いです。&提案。
ここでは、Robert Longsonのダッシュアレイの提案と円弧を使用した例を示します。図1として
<!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>
、私はそれがそれぞれ通過する第2と短く取得したいです。 – Kayote
ストロークダッシュアレー/ストロークダッシュオフセットを調整します。そこには既存の質問と回答がたくさんあります。 –
@RobertLongsonありがとう、私は今それを探しています。 – Kayote