css - svg 动画折线 心率

标签 css svg polyline

我的目标是为心率折线制作一个 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>

最佳答案

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>

关于css - svg 动画折线 心率，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49446318/

上一篇：css - 带样式的组件可以像 SCSS 一样处理计算吗？

下一篇：CSS 过渡 : Making it go from Right to Left, 而不是从左到右

相关文章：

html - css 文件路径正确，css 代码有效，但不起作用

jquery - MVC Bootstrap 弹出窗口无法正确显示

css - Firefox 和响应式 SVG

d3.js - 如何使用D3 d3js根据元素属性分层追加 "composed"元素？

javascript - 有什么方法可以在 Leaflet 上绘制路径(多段线)，宽度/笔划以米而不是像素为单位？

Android Polyline 没有正确绘制路线

html - 只有一个元素的双边框

css - Linux FF 和 Windows FF 中的字体不一样

svg - 我可以在 svg 中混合渐变吗？

javascript - 在谷歌地图上自由绘制

©2024 IT工具网  联系我们