Сокращение пути в 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"/>

https://jsfiddle.net/crggL2h9/

Ive смотрел на код SVG (который был преобразован из circle в path), однако, я понятия не имею, как идти о снижении его. По достоинству оценят предложения &.

источник

2016-08-06 Kayote

Согласно схеме, я хочу, чтобы получить короче с каждым вторым. – Kayote

Затем отрегулируйте удар-даршара/удар-даша. На это много вопросов и ответов. –

@RobertLongson Спасибо, я сейчас изучаю его. – Kayote

Вот пример, который использует предложение Дашаррау Роберта Лонгсона и круг дуги.

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

ответ

Смежные вопросы