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

这样的事情：

＆＃13;

＆＃13;

$(document).ready(function() {

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

})

＆＃13;

.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;
  }
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 3

为相关的svg属性设置动画，即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>

  sequence :email do |n|
    "person#{n}@example.com"
  end