元素从左到右像心电图一样动起来,svg位置不变,只变内部线条

好的，那么可以使用CSS3的@keyframes和stroke-dasharray属性来为SVG内部的线条添加类似心电图的动画效果。以下是一个示例代码，可以使用这个代码将SVG内部的线条从左到右进行类似心电图的动画：

<style>
  .line {
    stroke-dasharray: 1000; /* 设置线条的总长度 */
    stroke-dashoffset: 1000; /* 将线条偏移1000，使得不可见 */
    animation: heartbeat 2s linear infinite; /* 添加心电图动画 */
  }
  
  @keyframes heartbeat {
    0% {
      stroke-dashoffset: 1000; /* 初始状态，线条不可见 */
    }
    20% {
      stroke-dashoffset: 800; /* 显示线条的前20% */
    }
    40% {
      stroke-dashoffset: 600; /* 显示线条的前40% */
    }
    60% {
      stroke-dashoffset: 400; /* 显示线条的前60% */
    }
    80% {
      stroke-dashoffset: 200; /* 显示线条的前80% */
    }
    100% {
      stroke-dashoffset: 0; /* 显示线条的全部 */
    }
  }
</style>

<svg class="svg" view-box="0 0 800 200">
  <polyline class="line" points="100,50 150,50 162.5,45 175,60 187.5,10 200,70 212.5,40 225,60 237.5,40 250,50 300,50"></polyline>
</svg>

在上面的代码中，我们首先将线条的总长度设置为1000，然后将线条偏移1000，使得线条不可见。接着，使用@keyframes定义一个名为“heartbeat”的动画，将线条依次显示前20%、前40%、前60%、前80%和全部。最后，将动画应用于SVG内部的线条，使其持续2秒，以线性方式无限循环。这样就可以实现SVG内部的线条从左到右进行类似心电图的动画了。