如何在此过渡中添加背景图像以填充文本？

Question

我在CSS中使用svg模式来创建文本动画。文本完成后，我希望将其填充为背景图像，而不是绿色。我怎么做？

em

body{
  background-color: #ECEAEA;
}

.text-line text {
  stroke-dasharray: 500;
  stroke-dashoffset: 500;
  animation: dash 5s linear forwards, filling 4s ease-in forwards;
}

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

@keyframes filling {
  from{
    fill: #F3F3F3;
    fill-opacity: 0;
  }
  to {
    fill: #1985A1;
    fill-opacity: 1;
  }
}

Answer 1

我可以通过将背景变成图案来实现。

尝试一下：

echo '<img src="specialRoot/'.$row->image_name.'" width="250">';

body{
  background-color: #ECEAEA;
}

.text-line text {
  stroke-dasharray: 500;
  stroke-dashoffset: 500;
  animation: dash 5s linear forwards, filling 6s ease-in forwards;
}

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

@keyframes filling {
  from{
    /*fill: #F3F3F3;*/
    fill-opacity: 0;
  }
  50% {
    fill-opacity: 0.1;
  }
  to {
    /*fill: #1985A1;*/
    fill-opacity: 1;
  }
}