下面是个例子:
<style> .demo2{ transform-origin: center; transform: rotate(-90deg); transition: stroke-dasharray .3s ease-in; } </style> <svg height="150" width="110"> <circle cx="55" cy="55" r="50" fill="none" stroke="grey" stroke-width="5" stroke-linecap="round"/> <circle class="demo2" id="J_demo2" cx="55" cy="55" r="50" fill="none" stroke="red" stroke-width="5" stroke-dasharray="0,10000"/> </svg> <input id="J_btn_1" type="text" name="" value="10"> <input id="J_btn_2" type="button" name="" value="set"> <script> var demo2 = document.querySelector("#J_demo2"); var btn1 = document.querySelector("#J_btn_1"); var btn2 = document.querySelector("#J_btn_2"); var circleLength = Math.floor(2 * Math.PI * demo2.getAttribute("r")); window.onload = rotateCircle; btn2.onclick = rotateCircle; function rotateCircle () { var val = parseFloat(btn1.value).toFixed(2); val = Math.max(0,val); val = Math.min(100,val); demo2.setAttribute("stroke-dasharray","" + circleLength * val / 100 + ",10000"); } </script>
原文:https://segmentfault.com/a/1190000008149403