減少SVG中的路徑

我正處於一個階段，我正在思考我想要創建的番茄鐘的邏輯基礎。減少SVG中的路徑

我想使用SVG，所以我可以學習&練習練習。

我已經記轉換爲路徑的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"/>

伊夫在SVG代碼（將其轉化從circle到path）一直盯着，但我不知道如何去減少它。將不勝感激想法&的建議。

來源

2016-08-06 Kayote

按照圖中，我希望它每過第二次變短。 – Kayote

然後調整stroke-dasharray/stroke-dashoffset。這方面有很多現存的問題和答案。 –

@RobertLongson謝謝，我現在正在研究它。 – Kayote

下面是一個使用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>

來源

2016-08-06 14:40:47

減少SVG中的路徑

回答

相關問題