如何用Velocity.js实现SVG路径的径向渐变填充动画？

Great question! The issue here is that Velocity.js's built-in fill animation is designed to handle solid color values (like hex, RGB/RGBA) out of the box, but it doesn't natively support transitioning to a gradient reference like url(#MyGradient)—since that's not a color data type, it's a reference to an SVG resource.

Here are a few solid solutions to get this working:

Method 1: Overlay Elements + Opacity Animation (Simplest Approach) #

The easiest way to mimic a fill transition to a gradient is to use two overlapping elements: one with your starting solid color, and another with the gradient (initially hidden). Then animate their opacities with Velocity.js to create the transition effect.

First, adjust your SVG to include both elements in a group (and fix duplicate gradient IDs):

<defs>
  <!-- Critical fix: IDs must be unique—your original code had duplicate `MyGradient` entries -->
  <radialGradient id="MyGradient">
    <stop offset="5%" stop-color="#f60"></stop>
    <stop offset="95%" stop-color="#ff6"></stop>
  </radialGradient>
</defs>

<g>
  <rect id="solidFill" width="200" height="200" fill="#f60" />
  <rect id="gradientFill" width="200" height="200" fill="url(#MyGradient)" opacity="0" />
</g>

Then use Velocity.js to animate both opacities simultaneously:

// Target the group containing both elements to sync animations
const targetGroup = $(event.target).closest('g');
targetGroup.find('#gradientFill').velocity({ opacity: 1 }, 4000);
targetGroup.find('#solidFill').velocity({ opacity: 0 }, 4000);

Method 2: Use SVG Native Animation + Velocity.js Sync #

If you prefer to work with a single element, define an SVG <animate> element for the fill property, then trigger it alongside your Velocity.js opacity animation to keep them synchronized.

Update your SVG element to include the native animation:

<rect id="targetElement" width="200" height="200" fill="#f60">
  <animate 
    attributeName="fill" 
    from="#f60" 
    to="url(#MyGradient)" 
    dur="4000ms" 
    fill="freeze" 
    begin="indefinite" 
    id="fillTransition"
  />
</rect>

Then use Velocity.js to run your opacity animation, and trigger the SVG animation in the start callback:

$(event.target).velocity({ opacity: 1 }, {
  duration: 4000,
  start: function() {
    // Trigger the native SVG fill transition
    document.getElementById('fillTransition').beginElement();
  }
});

Key Fixes for Your Original Code #

• Duplicate Gradient IDs: Your original <defs> had two gradients with the same id="MyGradient"—this is invalid SVG, as IDs must be unique. Remove the duplicate or rename one to avoid browser conflicts.
• Exact ID Matching: Double-check that url(#MyGradient) matches the exact case-sensitive ID of your gradient in <defs>.

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