小编jfe*_*man的帖子

SVG - 如何将笔划从虚线变为实心？

我有这个装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;
  }
}

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

有什么建议？

html javascript css svg

Sim*_*mon

2017 09-24

1
推荐指数

1
解决办法

893
查看次数

标签统计

css ×1

html ×1

javascript ×1

svg ×1

SVG - 如何将笔划从虚线变为实心？

标签 统计

小编jfe_man的帖子

标签统计