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

【问题标题】：How do I add a background image to fill the text in this transition?如何添加背景图像以填充此过渡中的文本？
【发布时间】：2019-12-30 15:12:00
【问题描述】：

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

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;
  }
}

<svg height="100" width="auto" stroke="#1985A1" stroke-width="2" class="text-line">
  <text style="font-family: 'Oak', sans-serif; font-weight: bold; font-style: normal" x="50" y="90" fill="none" font-size = "100">WE ARE IN IT</text>
</svg>
<svg height="100" width="auto" stroke="#1985A1" stroke-width="2" class="text-line">
  <text style="font-family: 'Oak', sans-serif; font-weight: bold; font-style: normal" x="50" y="90" fill="none" font-size = "100">FOR THE LONG RUN</text>
</svg>

【问题讨论】：

标签： html css animation svg

【解决方案1】：

我可以把背景做成图案。

试试这个：

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;
  }
}

<svg height="100" width="auto" stroke="#1985A1" stroke-width="2" class="text-line">
  <defs>
        <pattern id="img1" patternUnits="userSpaceOnUse" width="900" height="600">
            <image xlink:href="https://www.itl.cat/pics/b/31/314525_background-wallpaper-hd.jpg" x="0" y="0"
                width="900" height="600" />
        </pattern>
    </defs>
  <text style="font-family: 'Oak', sans-serif; font-weight: bold; font-style: normal" x="50" y="90" fill="url(#img1)" font-size = "100">WE ARE IN IT</text>
</svg>
<svg height="100" width="auto" stroke="#1985A1" stroke-width="2" class="text-line">
  <text style="font-family: 'Oak', sans-serif; font-weight: bold; font-style: normal" x="50" y="90" fill="url(#img1)" font-size = "100">FOR THE LONG RUN</text>
</svg>

【讨论】：