svg 动画 折线 心率

Question

我的目标是为心率折线制作 svg 动画，就像这里 https://codepen.io/chriscoyier/pen/bGyoz
但似乎我做错了什么。你知道这段代码有什么问题吗？

如果您知道一些使动画像真实心率一样的技术：始终从头开始显示线条，而不是从头开始重建，那就太好了！ :-)

#heart {
  position: absolute;
    width: 100px;
    height: 90px;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 9999;
    margin-top:10px;
}

#heart:before,
#heart:after {
  position: absolute;
  content: "";
  left: 50px;
  top: 0;
  width: 50px;
  height: 80px;
  background: #1D74BA;
  -moz-border-radius: 50px 50px 0 0;
  border-radius: 50px 50px 0 0;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-transform-origin: 0 100%;
  -moz-transform-origin: 0 100%;
  -ms-transform-origin: 0 100%;
  -o-transform-origin: 0 100%;
  transform-origin: 0 100%;
}

#heart:after {
  left: 0;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transform-origin: 100% 100%;
  -moz-transform-origin: 100% 100%;
  -ms-transform-origin: 100% 100%;
  -o-transform-origin: 100% 100%;
  transform-origin: 100% 100%;
}

svg.heart-rate {
     position: absolute;
    z-index: 999;
    color: white;
    fill: currentColor;
    left: 213%;
    top: 5%;
    transform: translate(-50%,-50%) scale(0.85);
}
.path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dash 2s linear alternate infinite;
}

@keyframes dash {
  from {
    stroke-dashoffset: 1000;
  }
  to {
    stroke-dashoffset: 0;
  }
}

<div id="heart">
    <svg class="heart-rate" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="689px" height="359px" viewBox="0 0 689 359" preserveAspectRatio="xMidYMid meet" ><rect id="svgEditorBackground" x="0" y="0" width="689" height="359" style="fill: none; stroke: none;"/><path clas="path" style="stroke:white;fill:none;stroke-width:4px;" id="e1_polyline" d="M106.204 222.314 113.506 219.658 124.126 226.296 130.1 203.728 136.738 222.977 140.721 218.331 155.987 230.943 164.617 207.047 169.927 223.641 176.565 219.658 180.547 224.969 196.478 224.969"/></svg>
  </div>

Answer 1

path 是一个元素，而不是一个类。您需要从选择器中删除句点。

.path { ... } 变为 path { ... }

#heart {
  position: absolute;
    width: 100px;
    height: 90px;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 9999;
    margin-top:10px;
}

#heart:before,
#heart:after {
  position: absolute;
  content: "";
  left: 50px;
  top: 0;
  width: 50px;
  height: 80px;
  background: #1D74BA;
  -moz-border-radius: 50px 50px 0 0;
  border-radius: 50px 50px 0 0;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-transform-origin: 0 100%;
  -moz-transform-origin: 0 100%;
  -ms-transform-origin: 0 100%;
  -o-transform-origin: 0 100%;
  transform-origin: 0 100%;
}

#heart:after {
  left: 0;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transform-origin: 100% 100%;
  -moz-transform-origin: 100% 100%;
  -ms-transform-origin: 100% 100%;
  -o-transform-origin: 100% 100%;
  transform-origin: 100% 100%;
}

svg.heart-rate {
     position: absolute;
    z-index: 999;
    color: white;
    fill: currentColor;
    left: 213%;
    top: 5%;
    transform: translate(-50%,-50%) scale(0.85);
}
path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dash 2s linear alternate infinite;
}

@keyframes dash {
  from {
    stroke-dashoffset: 1000;
  }
  to {
    stroke-dashoffset: 0;
  }
}

<div id="heart">
    <svg class="heart-rate" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="689px" height="359px" viewBox="0 0 689 359" preserveAspectRatio="xMidYMid meet" ><rect id="svgEditorBackground" x="0" y="0" width="689" height="359" style="fill: none; stroke: none;"/><path clas="path" style="stroke:white;fill:none;stroke-width:4px;" id="e1_polyline" d="M106.204 222.314 113.506 219.658 124.126 226.296 130.1 203.728 136.738 222.977 140.721 218.331 155.987 230.943 164.617 207.047 169.927 223.641 176.565 219.658 180.547 224.969 196.478 224.969"/></svg>
  </div>

如果这是我的代码，我会稍微改变动画...

#heart {
  position: absolute;
    width: 100px;
    height: 90px;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 9999;
    margin-top:10px;
}

#heart:before,
#heart:after {
  position: absolute;
  content: "";
  left: 50px;
  top: 0;
  width: 50px;
  height: 80px;
  background: #1D74BA;
  -moz-border-radius: 50px 50px 0 0;
  border-radius: 50px 50px 0 0;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-transform-origin: 0 100%;
  -moz-transform-origin: 0 100%;
  -ms-transform-origin: 0 100%;
  -o-transform-origin: 0 100%;
  transform-origin: 0 100%;
}

#heart:after {
  left: 0;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transform-origin: 100% 100%;
  -moz-transform-origin: 100% 100%;
  -ms-transform-origin: 100% 100%;
  -o-transform-origin: 100% 100%;
  transform-origin: 100% 100%;
}

svg.heart-rate {
     position: absolute;
    z-index: 999;
    color: white;
    fill: currentColor;
    left: 213%;
    top: 5%;
    transform: translate(-50%,-50%) scale(0.85);
}
path {
  stroke-dasharray: 500;
  stroke-dashoffset: 500;
  animation: dash 4s linear infinite;
}

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

<div id="heart">
    <svg class="heart-rate" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="689px" height="359px" viewBox="0 0 689 359" preserveAspectRatio="xMidYMid meet" ><rect id="svgEditorBackground" x="0" y="0" width="689" height="359" style="fill: none; stroke: none;"/><path clas="path" style="stroke:white;fill:none;stroke-width:4px;" id="e1_polyline" d="M106.204 222.314 113.506 219.658 124.126 226.296 130.1 203.728 136.738 222.977 140.721 218.331 155.987 230.943 164.617 207.047 169.927 223.641 176.565 219.658 180.547 224.969 196.478 224.969"/></svg>
  </div>