javascript - 我该如何做才能使路径在内容下方延伸？

Question

我有一个任务要做一个画线的动画，但没那么简单。 我的 SVG 应该与带有文本的 div block 大小相同。但问题是我做不到! 换句话说，您需要使路径的高度与文本中的行数相同。 我们目前看到，随着内容的增加，路径下降到底部。

如何纠正这种情况以获得所需的结果？

// line length
let svgPath = [...document.querySelectorAll(".list__splitter path")]
svgPath.forEach(path => {
  let length = path.getTotalLength()
  path.style.setProperty('--path-length', length);

})

// start animation
svgPath.forEach(path => {
  path.classList.add("pathAnima")
})

.list {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  max-width: 400px;
}

.list__item {
  padding: 1em;
  background: #f9f9f9;
  min-height: 92px;
}

.list__splitter {
  position: relative;
}

.list__splitter--revert {
  transform: scale(-1, 1);
}

.list__splitter__content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  transform: translatey(-50%);
}

.list__splitter__content svg {
  width: 100%;
  height: 123px;
}

.list__splitter__content svg path {
  vector-effect: non-scaling-stroke;
}

.list__splitter__content::before,
.list__splitter__content::after {
  width: 10px;
  height: 10px;
  position: absolute;
  background: #f00;
}

.list__splitter__content::after {
  content: "";
  bottom: -4px;
  right: -4px;
}

.list>*:nth-child(2) .list__splitter__content::before {
  content: "";
  top: -4px;
  left: -4px;
}

.pathAnima {
  stroke-dasharray: var(--path-length);
  stroke-dashoffset: var(--path-length);
  animation-name: pathAnima;
  animation-duration: 3s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
}

@keyframes pathAnima {
  to {
    stroke-dashoffset: 0;
  }
}

<div class="content">
  <div class="list">
    <div class="list__item">A certain <br> text</div>
    <div class="list__splitter">
      <div class="list__splitter__content">
        <svg viewBox="0 0 517 123" fill="none" preserveAspectRatio="none">
                    <path d="M1.5.9v30.3a30 30 0 0030 30h454a30 30 0 0130 30v31.1" stroke="#000"/>
                </svg>
      </div>
    </div>

    <div class="list__item">A certain <br> text A certain <br> text A certain <br> text A certain <br> text</div>
    <div class="list__splitter list__splitter--revert">
      <div class="list__splitter__content">
        <svg viewBox="0 0 517 123" fill="none" preserveAspectRatio="none">
                    <path d="M1.5.9v30.3a30 30 0 0030 30h454a30 30 0 0130 30v31.1" stroke="#000"/>
                </svg>
      </div>
    </div>

    <div class="list__item">A certain <br> text</div>
  </div>
</div>

Answer 1

为什么不采用纯 CSS 解决方案:

.list {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  max-width: 400px;
}

.list__item {
  padding: 1em;
  border-left:5px solid transparent;
  border-right:5px solid transparent;
  background: 
    linear-gradient(red,red) left/10px 10px no-repeat border-box,
    #f9f9f9 padding-box;
  min-height: 92px;
  position: relative;
}

.list__item:nth-child(even) {
  background-position:right;
}

.list__item::before,
.list__item::after{
   content:"";
   position:absolute;
   width:50%;
   height:50%;
   left:-1px;
   border-left:2px solid;
   pointer-events:none;
   z-index:3;
   clip-path:inset(0 0 0 100%)
}
.list__item::before {
  top:-1px;
  border-top:2px solid;
  border-top-left-radius:30px;
  animation:two 2s 2s linear forwards;
}
.list__item::after {
  bottom:-1px;
  border-bottom:2px solid;
  border-bottom-left-radius:30px;
  animation:one 2s linear forwards;
}
.list__item:nth-child(even)::before,
.list__item:nth-child(even)::after{
  transform:scaleX(-1);
  transform-origin:right;
}

.list__item:first-child::before,
.list__item:last-child::after {
  display:none;
}

@keyframes one {
  0% {
     clip-path:inset(0 calc(100% - 10px) 100% 0)
  }
  50% {
     clip-path:inset(0 calc(100% - 10px) 0  0)
  }
  100% {
     clip-path:inset(0 0 0 0)
  }
}
@keyframes two {
  0% {
     clip-path:inset(0 0 calc(100% - 10px) 100%)
  }
  50% {
     clip-path:inset(0 0 calc(100% - 10px) 0)
  }
  100% {
     clip-path:inset(0 0 0 0)
  }
}

<div class="list">
    <div class="list__item">A certain <br> text</div>
    <div class="list__item">A certain <br> text A certain <br> text A certain <br> text A certain <br> text A certain <br> text A certain <br> text A certain <br> text</div>
    <div class="list__item">A certain <br> text</div>
  </div>