SVG-如何將筆划從虛線變為實線？

Question

我有這個加載svg

想法是，當我提交表單時，它會顯示出來並且正在旋轉。 完成處理后，圓應該變成“實心”，您會看到虛線擴大並變成一個完整的圓，並且它將停止旋轉。

 #svg-circle { fill: none; stroke: #333; stroke-width: 6; stroke-dasharray: 22.68px; stroke-dashoffset: 10px; stroke-linecap: round; animation: circleAn 1s linear infinite; -webkit-transition: ease 250ms; -moz-transition: ease 250ms; transition: ease 250ms; } @keyframes circleAn { to { stroke-dashoffset: 100px; } } 

 <svg id="svg-msg"> <circle id="svg-circle" class="svg-circle" cx="100" cy="100" r="94" /> </svg> 

有什么建議么？

Answer 1

stroke-dasharray: 22.68px;

是以下內容的簡寫：

stroke-dasharray: 22.68px 22.68px;

這意味着先是22.68，然后是22.68的差距。 然后重復破折號。

如果您希望破折號擴大，間隙也相應縮小，則需要同時增大第一個數字和第二個數字。 換句話說，破折號數組必須變為：

stroke-dasharray: 45.36px 0px;

 $(document).ready(function() { $("#done").on("click", function() { $("#svg-circle").css("stroke-dasharray", "45.36px 0px"); }) }) 

 #svg-msg { width: 200px; height: 200px; } .svg-circle { fill: none; stroke: #333; stroke-width: 6; stroke-dasharray: 22.68px; stroke-dashoffset: 10px; stroke-linecap: round; animation: circleAn 1s linear infinite; transition: ease 1s; } .svg-circle-full { fill: none; stroke: red; stroke-width: 6; stroke-linecap: round; } @keyframes circleAn { to { stroke-dashoffset: 100px; } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <svg id="svg-msg"> <circle id="svg-circle" class="svg-circle" cx="100" cy="100" r="94" /> </svg> <br/> <button id="done">Done </button> 

Answer 2

像這樣：

 $(document).ready(function() { $("#done").on("click", function() { $("#svg-circle").css("stroke-dasharray", "44px 0px"); }) }) 

 .svg-circle { fill: none; stroke: #333; stroke-width: 6; stroke-dasharray: 22.68px; stroke-dashoffset: 10px; stroke-linecap: round; animation: circleAn 1s linear infinite; -webkit-transition: ease 250ms; -moz-transition: ease 250ms; transition: ease 250ms; } .svg-circle-full { fill: none; stroke: red; stroke-width: 6; stroke-linecap: round; } @keyframes circleAn { to { stroke-dashoffset: 100px; } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="preloader"> <svg id="svg-msg"> <circle id="svg-circle" class="svg-circle" cx="100" cy="100" r="94" /> </svg> </div> <button id="done">Done </button> 

Answer 3

對相關的svg屬性進行動畫處理，例如stroke-offset （就像您已經做的那樣）和stroke-dasharray ，如下所示：

 // no need for javascript in this example; // this is just for triggering the additional animation, // to simulate your form 'submit' action var svg = document.getElementById('svg-msg'), btn = document.getElementById('swap'); btn.addEventListener('click', function(e) { svg.classList.remove('rotate'); svg.classList.add('merge'); }, false); 

 svg { height: 200px; } #svg-circle { fill: none; stroke: #333; stroke-width: 6; stroke-linecap: round; -webkit-transition: 250ms; -moz-transition: 250ms; transition: 250ms; } svg.rotate #svg-circle { stroke-dasharray: 22.68px; animation: circleAn 1s linear infinite; } svg.merge #svg-circle { animation: circleMerge 1s linear; } @keyframes circleAn { from { stroke-dashoffset: 10px; } to { stroke-dashoffset: 100px; } } @keyframes circleMerge { from { stroke-dasharray: 22.68px; } to { stroke-dasharray: 22.68px 0; } } 

 <svg id="svg-msg" class="rotate"> <circle id="svg-circle" class="svg-circle" cx="100" cy="100" r="94" /> </svg> <button id="swap">swap animation</button>