Reduzierung des Pfades in SVG

Ich bin in einem Stadium, in dem ich über die Logik nachdenke, die einer Pomodoro-Uhr zugrunde liegt, die ich erschaffen möchte.Reduzierung des Pfades in SVG

Ich möchte SVG verwenden, damit ich & Übung für diese Übung lernen kann.

Was ich im Sinn haben, ist ein SVG circle auf Pfad umgewandelt. Im Laufe der Zeit verringert sich der Hub mit jeder Sekunde.

<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/

Ive im SVG-Code gestarrt (die circle-path umgewandelt wurde), aber ich habe keine Ahnung, wie über die Verringerung es zu gehen. Würde Ideen schätzen & Vorschläge.

Quelle

2016-08-06 Kayote

Wie in der Abbildung dargestellt, mag ich es mit jeder Sekunde kürzer zu bekommen. – Kayote

Passen Sie den Strich-dasharray/stroke-dashoffset dann. Dazu gibt es viele Fragen und Antworten. –

@RobertLongson Danke, ich untersuche es jetzt. – Kayote

Hier ist ein Beispiel, das Robert Longsons Dasharray-Vorschlag und einen Bogenkreis verwendet.

<!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>

Quelle

2016-08-06 14:40:47

Reduzierung des Pfades in SVG

Antwort

Verwandte Themen