需要動畫的圓圈邊界時鐘明智

我需要旋轉虛線筆圈明智的時鐘，目前其旋轉「反時鐘明智」。我認爲它可以使用PATH我們做了，但不知道我可以創建它，需要動畫的圓圈邊界時鐘明智

<svg preserveAspectRatio="none" viewBox="0 0 500 500" > 
    <circle cx="200" cy="200" r="167" stroke-dasharray="2,4" stroke-width="2" stroke="red" fill="white" stroke-linecap="round" /> 
    <circle cx="200" cy="200" r="167" stroke-dasharray="1200,1200" stroke-width="3" stroke-dashoffset="0" stroke-linecap="round" stroke="white" fill="none" > 
     <animate attributeType="XML" attributeName="stroke-dashoffset" from="0" to="1200" dur="4s" repeatCount="1" fill="freeze" /> 
    </circle> 
</svg>

這裏是鏈接，

https://jsfiddle.net/y492v144/

提前感謝！

來源

2016-01-13 Gaurav

你的回答，請檢查一下jQuery的標籤 –

@DivyeshChothani：我不認爲有的任何是用'svg' 'css3''htm5'。 –

嗨，感謝您的回覆，是的，我知道，它是在jQuery發佈，但我需要一些修改，並且不同的結果，所以我添加了新的帖子...謝謝兩個.. :) – Gaurav

退房這個DEMO

<svg preserveAspectRatio="none" viewBox="0 0 500 500" > 
    <circle cx="200" cy="200" r="167" stroke-dasharray="2,4" stroke-width="2" stroke="red" fill="white" stroke-linecap="round" /> 
    <circle cx="200" cy="200" r="167" stroke-dasharray="1200,1200" stroke-width="3" stroke-dashoffset="0" stroke-linecap="round" stroke="white" fill="none" > 
     <animate attributeType="XML" attributeName="stroke-dashoffset" from="0" to="-1200" dur="4s" repeatCount="1" fill="freeze" /> 
    </circle> 
</svg>

只要給to在計算器已經協調negative value

來源

2016-01-13 05:21:55

完美，謝謝，我們可以開始從頂部圈起......？ – Gaurav

是的你可以參考這個jsfiddle http://jsfiddle.net/alkhoo/JwkYm/15/ –

需要動畫的圓圈邊界時鐘明智

回答

相關問題