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>