如何在SVG+CSS文字动画完成后用背景图片填充文字？

Got it, let's walk through how to swap that solid teal fill with a background image once your text animation wraps up. Here's a step-by-step solution tailored to your existing code:

Step 1: Define an SVG Pattern for Your Background Image #

First, we need to create a reusable pattern in SVG that references your background image. Add this <defs> block inside one of your SVG elements (I'll put it in the first one so both text elements can use it):

<defs>
  <!-- Adjust width/height to match your text's total width and height -->
  <pattern id="textFillPattern" patternUnits="userSpaceOnUse" width="1200" height="100">
    <image 
      href="your-background-image.jpg" 
      width="1200" 
      height="100" 
      preserveAspectRatio="xMidYMid slice"
    />
  </pattern>
</defs>

• patternUnits="userSpaceOnUse" ensures the pattern scales correctly with your text. Update width to match the longest text line's width (your second line "FOR THE LONG RUN" is wider, so 1200 is a safe starting point).
• preserveAspectRatio="xMidYMid slice" makes sure the image fills the pattern area without stretching or squishing.

Step 2: Modify CSS Animations to Use the Pattern #

We have two options depending on when you want the background image to appear:

Option 1: Pattern Fades In Alongside Existing Fill Animation #

Update your CSS @keyframes filling to target the pattern instead of a solid color:

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: url(#textFillPattern); /* Swap solid color with pattern */
    fill-opacity: 1; 
  } 
}

Option 2: Pattern Appears After Stroke Animation Completes #

If you want the solid fill to finish first, then swap to the pattern once the stroke animation ends, add a new animation with a delay:

body{ background-color: #ECEAEA; }
.text-line text { 
  stroke-dasharray: 500; 
  stroke-dashoffset: 500; 
  /* Run dash, fill solid, then switch to pattern after 5s */
  animation: dash 5s linear forwards, filling 4s ease-in forwards, swapToPattern 0.3s ease-in forwards 5s; 
}
@keyframes dash { 
  to { stroke-dashoffset: 0; } 
}
@keyframes filling { 
  from{ 
    fill: #F3F3F3; 
    fill-opacity: 0; 
  } 
  to { 
    fill: #1985A1; /* Keep solid fill first */
    fill-opacity: 1; 
  } 
}
@keyframes swapToPattern {
  to {
    fill: url(#textFillPattern); /* Swap to pattern */
  }
}

Step 3: Full Modified Code #

Here's the complete code with Option 1 (pattern fades in with the animation):

<style>
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: url(#textFillPattern); 
    fill-opacity: 1; 
  } 
}
</style>

<svg height="100" width="auto" stroke="#1985A1" stroke-width="2" class="text-line">
  <defs>
    <pattern id="textFillPattern" patternUnits="userSpaceOnUse" width="1200" height="100">
      <image href="your-background-image.jpg" width="1200" height="100" preserveAspectRatio="xMidYMid slice" />
    </pattern>
  </defs>
  <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>

Key Notes #

• Replace your-background-image.jpg with your actual image path (local file or online URL).
• Adjust the pattern's width if your text is wider/narrower than 1200px to ensure the image covers the entire text.
• Test the animation timings to match your desired flow—tweak the 5s/4s values if you want faster/slower transitions.

内容的提问来源于stack exchange，提问作者Nomadic_girl