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>