svg анимация пульса полилинии

Я стремлюсь к 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>


svg css polyline
person Krystian    schedule 23.03.2018    source источник

Ответы (1)


arrow_upward
2
arrow_downward

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>

person Turnip    schedule 23.03.2018
comment
блестяще! Благодарю вас! - person Krystian; 23.03.2018