那些遇到过的问题

开始/停止 SVG 动画

iSo*_*fia 1 html css animation svg

我想使用 CodePen 上发布的这个漂亮的 SVG 动画，但我不知道如何启动或重新启动动画：

https://codepen.io/elevaunt/pen/JYRBzJ

HTML

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 130.2 130.2">
  <circle class="path circle" fill="none" stroke="#73AF55" stroke-width="6" stroke-miterlimit="10" cx="65.1" cy="65.1" r="62.1"/>
  <polyline class="path check" fill="none" stroke="#73AF55" stroke-width="6" stroke-linecap="round" stroke-miterlimit="10" points="100.2,40.2 51.5,88.8 29.8,67.5 "/>
</svg>
<p class="success">Oh Yeah!</p>

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 130.2 130.2">
  <circle class="path circle" fill="none" stroke="#D06079" stroke-width="6" stroke-miterlimit="10" cx="65.1" cy="65.1" r="62.1"/>
  <line class="path line" fill="none" stroke="#D06079" stroke-width="6" stroke-linecap="round" stroke-miterlimit="10" x1="34.4" y1="37.9" x2="95.8" y2="92.3"/>
  <line class="path line" fill="none" stroke="#D06079" stroke-width="6" stroke-linecap="round" stroke-miterlimit="10" x1="95.8" y1="38" x2="34.4" y2="92.2"/>
</svg>
<p class="error">Bummer!</p>
Run Code Online (Sandbox Code Playgroud)

CSS

svg {
  width: 100px;
  display: block;
  margin: 40px auto 0;
}

.path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 0;
  &.circle {
    -webkit-animation: dash .9s ease-in-out;
    animation: dash .9s ease-in-out;
  }
  &.line {
    stroke-dashoffset: 1000;
    -webkit-animation: dash .9s .35s ease-in-out forwards;
    animation: dash .9s .35s ease-in-out forwards;
  }
  &.check {
    stroke-dashoffset: -100;
    -webkit-animation: dash-check .9s .35s ease-in-out forwards;
    animation: dash-check .9s .35s ease-in-out forwards;
  }
}

p {
  text-align: center;
  margin: 20px 0 60px;
  font-size: 1.25em;
  &.success {
    color: #73AF55;
  }
  &.error {
    color: #D06079;
  }
}


@-webkit-keyframes dash {
  0% {
    stroke-dashoffset: 1000;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes dash {
  0% {
    stroke-dashoffset: 1000;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

@-webkit-keyframes dash-check {
  0% {
    stroke-dashoffset: -100;
  }
  100% {
    stroke-dashoffset: 900;
  }
}

@keyframes dash-check {
  0% {
    stroke-dashoffset: -100;
  }
  100% {
    stroke-dashoffset: 900;
  }
}
Run Code Online (Sandbox Code Playgroud)

问： 有人知道如何隐藏动画然后显示并通过单击按钮激活它吗？

任何帮助深表感谢。蒂亚！

enx*_*eta 5

这就是我的答案。Codepen 中的示例正在使用stroke-dasharray:1000. 这可能会给您带来问题。stroke-dasharray 值必须等于路径的长度。我重新计算了路径的长度，但保持相同的时间。您可能想将时间更改为其他时间。

另外：复选框是可见的，但实际上您隐藏了这些复选框。

我在 svg 元素中添加了边框，以明确您必须单击的位置。在实践中，我会使用另一条路径，可能是动画路径下方的浅灰色路径。

svg {
  width: 100px;
  display: block;
  margin: 40px auto 0;
}


.path.circle {
  stroke-dasharray: 390.2px;
  stroke-dashoffset: 390.2px;
  transition: stroke-dashoffset .9s ease-in-out;
  
}
.path.line {
  stroke-dasharray: 82.033px;
  stroke-dashoffset: 82.033px;
  transition: stroke-dashoffset .35s ease-in-out;
  transition-delay: .9s;
  
}
.path.check {
  stroke-dasharray: 99.21px;
  stroke-dashoffset: 99.21px;
  transition: stroke-dashoffset .35s ease-in-out;
  transition-delay: .9s;
  
}
p {
  text-align: center;
  margin: 20px 0 60px;
  font-size: 1.25em;
}
p.success {
  color: #73af55;
}
p.error {
  color: #d06079;
}


svg{border:1px solid}

#a:checked + svg  .path.circle{stroke-dashoffset: 0;}
#a:checked + svg  .path.check{stroke-dashoffset: 0;}


#b:checked + svg  .path.circle{stroke-dashoffset: 0;}
#b:checked + svg  .path.line{stroke-dashoffset: 0;}
Run Code Online (Sandbox Code Playgroud) 
<label>
  <input id="a" type="checkbox" />
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 130.2 130.2">
  <circle class="path circle" fill="none" stroke="#73AF55" stroke-width="6" stroke-miterlimit="10" cx="65.1" cy="65.1" r="62.1"/>
  <polyline  class="path check" fill="none" stroke="#73AF55" stroke-width="6" stroke-linecap="round" stroke-miterlimit="10" points="100.2,40.2 51.5,88.8 29.8,67.5 "/>
  </svg></label>

<p class="success">Oh Yeah!</p>



<label><input id="b" type="checkbox" />
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 130.2 130.2">
  <circle class="path circle" fill="none" stroke="#D06079" stroke-width="6" stroke-miterlimit="10" cx="65.1" cy="65.1" r="62.1"/>
  <line class="path line" id="kk" fill="none" stroke="#D06079" stroke-width="6" stroke-linecap="round" stroke-miterlimit="10" x1="34.4" y1="37.9" x2="95.8" y2="92.3"/>
  <line class="path line" fill="none" stroke="#D06079" stroke-width="6" stroke-linecap="round" stroke-miterlimit="10" x1="95.8" y1="38" x2="34.4" y2="92.2"/>
</svg></label>
Run Code Online (Sandbox Code Playgroud)

正如我之前在实践中评论过的那样，我会在动画路径下方使用另一条路径，可能是浅灰色的。为此，我将路径保存在一个<defs>元素中，并将这些元素与<use>

svg {
  width: 100px;
  display: block;
  margin: 40px auto 0;
}


.path.circle {
  stroke-dasharray: 390.2px;
  stroke-dashoffset: 390.2px;
  transition: stroke-dashoffset .9s ease-in-out;
  
}
.path.line {
  stroke-dasharray: 82.033px;
  stroke-dashoffset: 82.033px;
  transition: stroke-dashoffset .35s ease-in-out;
  transition-delay: .9s;
  
}
.path.check {
  stroke-dasharray: 99.21px;
  stroke-dashoffset: 99.21px;
  transition: stroke-dashoffset .35s ease-in-out;
  transition-delay: .9s;
  
}
p {
  text-align: center;
  margin: 20px 0 60px;
  font-size: 1.25em;
}
p.success {
  color: #73af55;
}
p.error {
  color: #d06079;
}

.base{fill:none;stroke:#d9d9d9;stroke-width:6;stroke-miterlimit:10;stroke-linecap:round;}


#a:checked + svg  .path.circle{stroke-dashoffset: 0;}
#a:checked + svg  .path.check{stroke-dashoffset: 0;}


#b:checked + svg  .path.circle{stroke-dashoffset: 0;}
#b:checked + svg  .path.line{stroke-dashoffset: 0;}
Run Code Online (Sandbox Code Playgroud) 
<label>
  <input id="a" type="checkbox" />
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 130.2 130.2">
  <defs>
   <circle id="c"  cx="65.1" cy="65.1" r="62.1"/>
   <polyline id="py" fill="none" points="100.2,40.2 51.5,88.8 29.8,67.5 "/>    
  </defs>
  <g  class="base">
  <use xlink:href="#c"/>
  <use xlink:href="#py"/>
  </g>
  <g fill="none" stroke="#73AF55" stroke-width="6" stroke-miterlimit="10">
  <use class="path circle" xlink:href="#c"/>
  <use class="path check" xlink:href="#py"/>
  </g>
  </svg></label>

<p class="success">Oh Yeah!</p>



<label><input id="b" type="checkbox" />
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 130.2 130.2">
  <defs>
  <line id="l1" x1="34.4" y1="37.9" x2="95.8" y2="92.3"/>
  <line id="l2" x1="95.8" y1="38" x2="34.4" y2="92.2"/>
  </defs>
  
  <g class="base">
  <use xlink:href="#c"/>
  <use xlink:href="#l1"/>
  <use xlink:href="#l2"/>
  </g>
  
  
  <g fill="none" stroke="#D06079" stroke-width="6" stroke-miterlimit="10" stroke-linecap="round">
  <use class="path circle" xlink:href="#c"/>
  <use class="path line" xlink:href="#l1"/>
  <use class="path line" xlink:href="#l2"/>
  </g>
</svg></label>
  

<p class="error">Bummer!</p>
Run Code Online (Sandbox Code Playgroud)

归档时间：

查看次数：

3889 次

最近记录：

3 年，4 月 前
相关归档
使用Javascript:如果没有选项卡或窗口的历史记录,如何创建一个"返回"链接,将用户带到链接？ 58
Bootstrap 4 - 卡列中的响应卡 47
Z-Index没有绝对位置 36
有没有办法通过jQuery获取CSS截断文本？ 25
Bootstrap 4更改断点 25
在后台的网页中播放声音文件 21
MVC Razor隐藏输入和传递值 19
如何以类似流体的方式为VectorDrawable制作动画？ 6
建议使用setTimeout从循环内重绘html画布的方法 2
CSS图像水下效应 0
难疑归档
"px","dip","dp"和"sp"之间有什么区别？ 5676
如何检查文件是否存在而没有例外？ 5290
将本地存储库分支重置为远程存储库HEAD 3488
ssh"权限太开放"错误 1859
我为什么要使用指针而不是对象本身？ 1532
为什么文本文件以换行符结尾？ 1375
你怎么能加速Eclipse？ 1258
在HTML中嵌入PDF的推荐方法？ 1128
在Python中将两个列表转换为字典 1101
angular.service vs angular.factory 1061